关于flex布局的应用

什么是flex布局？

Flex是Flexible Box的缩写，意味"弹性布局"，任何一个容器均可以指定为Flex布局

flex的基本概念？

• Flex布局元素，称为Flex容器，简称"容器"。它的全部子元素自动成为容器元素，简称"项目"。
• 容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的排列方式：从左到右；交叉轴的排列方式：从上到下;

  

容器的属性

一、flex-direction :属性决定主轴的方向 (即项目的排列方式）

flex-direction：row （主轴水平方向，起点在左端）

flex-direction：row-reverse （主轴水平方向，起点在右端）

flex-direction：column （主轴垂直方向，起点在上沿）

flex-direction：column-reverse （主轴在垂直方向，起点在下沿）

二、flex-wrap : 默认状况下，项目都排在一条线（又称"轴线"上）

flex-wrap：nowarp （不换行，默认的)

flex-wrap：wrap （换行，第一行在上面）

flex-wrap：wrap-reverse （换行，第一行在下面）

三、flex-flow：是flex-direction 属性和flex-wrap属性的简写，默认值row、nowrap

四、justify-content：属性定义了项目在主轴上的对齐方式

justify-content：flex-start （左对齐，默认值）

justify-content：flex-end（右对齐）

justify-content：center （居中）

justify-content：space-between （两端对齐，项目之间的间隔相等）

justify-content：space-around （每一个项目两侧的间距相等）

五、align-items :定义项目交叉轴上如何对齐（单行）

align-items：flex-start （交叉轴起点对齐）

align-items: flex-end （交叉轴终点对齐）

align-items：center （垂直方向，中间开始）

align-items：baseline （项目第一行文字的基线对齐）

align-items：stretch （默认值，若是项目未设置高度或设为auto,将占满整个容器的高度)

六、align-content :多行轴线对齐（用法同align-items ）

flex项目属性

一、order 定义项目排列顺序

order：number （数值越小越靠前，默认为0）

二、flex-grow 定义项目放大比例

flex-grow ：number（默认0，若是有剩余空间也不放大，值为1放大，2是1的双倍大小，此类推）

三、flex-shrink 定义项目缩小比例

flex-shrink ：number （默认为1，若是空间不足则会缩小，值为0不能缩小）

四、flex-basis 定义项目自身大小

flex-basis ：number/auto （默认auto，可设置固定的值50px/50%）

五、flex：属性是flex-grow，flex-shrink ,flex-basis的简写，默认值为0、一、auto

六、align-self 项目自身对齐

align-self ：auto | flex-start | flex-end | center | baseline | stretch

最后

若是以为本文还不错，记得点个赞哦！

欢迎你们加入，一块儿学习前端，共同进步！