弹性布局说明及flex容器属性

梦里梦外; 2022-02-23 02:14 222阅读 0赞

一、弹性布局  
说明：  
a) 给元素设置了display:flex;后，就成为了弹性盒或者弹性布局  
b) 当父元素设置了flex后，子元素的float，clear和vertical-align将会失效  
c) 我们把设置display:flex;属性的元素称之为Flex容器，把里面的子元素称之为Flex项目  
d) 当给元素设置了display:flex;后，会产生两根轴线：主轴和交叉轴  
**♥二、flex容器属性**  
1.设置主轴的方向  
语法：flex-direction:row|row-reverse|column|column-reverse;  
row 默认值，主轴在水平方向，起点在左端  
row-reverse 主轴在水平方向，起点在右端  
column 主轴在垂直方向，起点在上沿  
column-reverse 主轴在垂直方向，起点在下沿

2.设置flex项目一行或多行显示  
语法：flex-wrap:nowrap|wrap|wrap-reverse;  
nowrap 默认值，不换行  
wrap 换行  
wrap-reverse 换行，但行的顺序是倒过来的

3.flex-direction和flex-wrap简写方式  
语法：flex-flow:row nowrap; (默认值)

4.设置主轴对齐方式  
语法：justify-content:flex-start|flex-end|center|space-between|space-around;  
flex-start 主轴在水平方向时，类似于左浮动  
flex-end 主轴在水平方向时，类似于右浮动  
center 居中对齐  
space-between flex项目两端对齐，中间间隔相等  
space-around flex项目两侧间隔相等

5.设置交叉轴对齐方式  
语法：align-items:flex-start|flex-end|center|baseline|stretch;  
flex-start 对齐交叉轴的起点  
flex-end 对齐交叉轴的终点  
center 以交叉轴为参考居中对齐  
baseline flex项目第一行文字基线对齐  
stretch flex项目没有设置高度或者为auto，将占满整个父元素的高度

6.设置多根轴线对齐方式  
语法：align-content:flex-start|flex-end|center|space-between|space-around|stretch;  
flex-start 对齐交叉轴的起点  
flex-end 对齐交叉轴的终点  
center 以交叉轴为参考，居中对齐  
space-between 交叉轴两端对齐，轴线之间的间隔平均分布  
space-around Flex项目（沿交叉轴方向）之间的间隔相等  
stretch flex没有设置高度或者为auto，将均分父元素的高度

**♥三、 Flex项目属性**

1.设置flex项目排列顺序  
语法：order:整数值;  
注：值越小越靠前

2.设置某个flex项目不同于其他flex项目的交叉轴对齐方式  
语法：align-self:flex-start|flex-end|center|baseline|stretch;

3.设置flex项目放大比例  
语法：flex-grow:0|1|数值;  
注：当父元素存在剩余空间，flex项目也不放大，即flex-grow默认值为0

4.设置flex项目缩小比例  
语法：flex-shrink:1|0|数值;  
注：flex-shrink默认值为1，即当父元素空间不足时，flex项目等比例缩小  
flex-shrink:0;表示即使父元素空间不足，flex项目也不缩小

5.在分配剩余空间之前，设置flex项目占据主轴的空间  
语法：flex-basis:auto|百分比|数值+单位;

6.flex-grow,flex-shrink和flex-basis的简写方式  
语法：flex:0 1 auto; (默认值)  
注：flex:1; 完整写法为： flex:1 1 0%;  
应用1：flex项目等比例分配空间  
应用2：分配剩余空间给某个flex项目