zoukankan      html  css  js  c++  java
  • CSS Flex 弹性布局使用

    原文地址:CSS Flex 弹性布局使用 | Stars-One的杂货小窝

    前端钻研不深,本文只是稍微记录一下关于Flex布局的知识,讲得不深,需要深入了解学习的可以参考其他大佬的博客

    重点记录

    通过display:flex即可将div设置为flex布局

    flex-direction是关于布局排列的方向,默认为row,flex-direction: column可以将flex布局纵向排列

    flex布局可以通过align-itemjustify-content设置元素对齐方式

    默认flex布局是横向排列,align-item是对于y轴方向的对齐方式,justify-content是对于x轴的对齐方式

    如果flex布局是纵向排列,则align-item是对于x轴方向的对齐方式,justify-content是对于y轴的对齐方式,与上面的相反

    justify-content使用space-between即可让元素实现左右对齐的效果,使用space-around可以达到同样的效果,两者的不同为:space-around会在左右对齐后,会将间距进行平分且分给元素

    flex:1 1 0% 自动占满

    PS: 由于使用的是Uni-app开发,下面中的div是使用view标签

    居中

    以下都是横向排列的代码,关键属性为align-itemjustify-content

    水平居中

    <!-- 水平居中 -->
    <view style="display: flex;justify-content: center;">
    	<view style="background-color: #007AFF;">内容</view>
    	<view style="background-color: orange;">内容1</view>
    </view>
    

    垂直居中

    <!-- 垂直居中 -->
    <view class="flex" style="align-items: center;">
    	<view style="background-color: #007AFF;">内容</view>
    </view>
    

    水平垂直居中

    <!-- 水平垂直居中 -->
    <view class="flex" style="align-items: center;justify-content: center;">
    	<view style="background-color: #007AFF;">内容</view>
    </view>
    

    左右对齐

    
    <!-- 左右对齐 -->
    <view style="display: flex;justify-content: space-between;">
    	<view style="background-color: #007AFF;">内容</view>
    	<view style="background-color: orange;">内容1</view>
    </view>
    
    <!-- 左右平分内容,可扩展为平分布局 -->
    <view style="display: flex;">
    	<view style="background-color: #007AFF;flex: 1 1 0%;">内容</view>
    	<view style="background-color: orange;flex: 1 1 0%;">内容1</view>
    </view>
    

    上下对齐

    <!-- 垂直居顶 -->
    <view class="flex" style="align-items: flex-start;">
    	<view style="background-color: #007AFF;">内容</view>
    </view>
    
    <!-- 垂直居底 -->
    <view class="flex" style="align-items: flex-end;">
    	<view style="background-color: #007AFF;">内容</view>
    </view>
    
    

    自己稍微封装一下常用的样式:

    .match_parent {
    	flex: 1 1 0%;
    }
    
    .flex_left_right {
    	display: flex;
    	justify-content: space-between;
    }
    
    .flex {
    	display: flex
    }
    
    .flex-center{
    	display: flex;
    	align-items: center;
    }
    

    提问之前,请先看提问须知 点击右侧图标发起提问 联系我 或者加入QQ群一起学习 Stars-One安卓学习交流群 TornadoFx学习交流群:1071184701
  • 相关阅读:
    Vue(小案例_vue+axios仿手机app)_go实现退回上一个路由
    nyoj 635 Oh, my goddess
    nyoj 587 blockhouses
    nyoj 483 Nightmare
    nyoj 592 spiral grid
    nyoj 927 The partial sum problem
    nyoj 523 亡命逃窜
    nyoj 929 密码宝盒
    nyoj 999 师傅又被妖怪抓走了
    nyoj 293 Sticks
  • 原文地址:https://www.cnblogs.com/stars-one/p/14389616.html
Copyright © 2011-2022 走看看