CSS>>弹性布局的用法属性
Flex布局属性
作者：orange
日期：2021年10月22日
一.弹性布局的属性
1.flex-direction
flex-direction属性决定使用flex布局元素竖直分布或者横向分布，（默认横向分布）
有四个属性值分别是：row 从左往右（默认） row-reverse 相反 column 垂直从上往下 column-reverse 相反
.box { flex-direction: row | row-reverse | column | column-reverse;}
2.flex-wrap
flex-wrap属性定义，当一行放不下那么多元素时是否换行和方式
有三个属性： nowrap 不换行（默认） wrap 换行 wrap-reverse 第一行在下方
.box{ flex-wrap: nowrap | wrap | wrap-reverse;}
3.flex-flow
flex-flow是flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: <flex-direction> || <flex-wrap>;
4.justify-content
justify-content定义在水平排列的对齐方式（实现元素水平垂直居中的一种方式--水平居中）
共有五种属性
flex-start 在排列顺序的开始位置 （默认左边）
flex-end 在排列顺序的结束位置
center 居中
space-between 两端对齐，元素间距相同
space-around 和上面的区别就是两端也有间隔是元素间隔的一半
justify-content: flex-start | flex-end | center | space-between | space-around;
5.align-items
align-items属性定义在竖直对齐方式 （实现元素水平垂直居中的一种方式--垂直居中）
共有五种属性
flex-start 交叉轴起点对齐 （默认上）
flex-end 交叉轴结束对齐
center 居中
stretch 项目未设置高度，将占满整个容器的高度
baseline 项目的第一行文字的基线对齐
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
6.flex-grow
flex-grow属性定义项目的放大比例
flex-grow: <number>; /* default 0 */
7.flex-shrink
flex-shrink属性定义了项目的缩放 当空间不足时将项目缩小，如果是0 则不缩小，其他不为0的等比缩小
flex-shrink: <number>;
8.flex-self
flex-self允许有单个元素改变对齐方式
属性和align-items一致
align-self: auto | flex-start | flex-end | center | baseline | stretch;
(完)
作者：用户1059916219920
链接：https://juejin.cn/post/7021772758287646727