弹性布局

给其父元素添加属性,display:flex;justify-contentspace-between;其中的space-between作用是两端对齐(自己最常用弹性布局的属性),
 
子元素属性设置为flex: flex-grow  flex-shrink  flex-basis
这是简写,也可以单独分离开设置。其中的flex-grow为扩张率、flex-shrink为子元素收缩率、flex-basris是子元素 的收缩基准率,
在平常的开发中自己用到的不多
 
flex-flow 复合属性,是flex-directionflex-wrap的简写
不熟练的时候,分开设置,便于记忆,
flex-direction 定义子元素的排列方向,有4个属性值:row,子元素左对齐,也就是沿着x轴左到右排列
row-reverse 与row相反
column,子元素,从上往下(顶对齐)
column-reverse ,与column相反
flex-wrap 控制flex容器 单行显示还是多行显示。有3个属性值,nowrap | wrap | wrap-reverse
 
nowrap flex容器为单行,在这种情况下,有可能会溢出,
wrap flex容器为多行,溢出的部分会放置在第二行,
wrap-reverse wrap 反转排列。
 
 
align-content:flex-start | flex-end | center | space-between | space-around | stretch,用于多行的弹性盒模型容器,
 
align-items:flex-start | flex-end | center | baseline | stretch
用于flex容器
 
align-self:auto | flex-start | flex-end | center | baseline | stretch
用于flex子元素。
 
justify-content:flex-start | flex-end | center | space-between | space-around
用于flex容器。
感觉弹性布局在一般网站的作用不是很大,在微信小程序用得较多些~_~
原文地址:https://www.cnblogs.com/duxingdexin/p/9408184.html