flex布局

Posted 2020-12-01 nanhuaqiushui

flex布局

阮一峰：flex布局教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

注意点：

• 任何一个容器都可以指定为flex布局
• 行内元素也可以使用flex布局：display：inline-flex
• webkit内核的浏览器，必须加上-webkit前缀：display:-webkit-flex;
• ** 父元素设置flex布局后，子元素的float、clear、vertical-align属性将失效

基本概念

容器：flex容器

Flex项目：所有flex容器的子元素

容器属性（6个）

flex-direction属性：决定主轴的排列方向

row:默认值，主轴为水平方向，起点为左端
row-reverse: 主轴为水平方向，起点为右端
column:主轴为垂直方向，起点为上端
column-reverse: 主轴为垂直方向，起点为下端

flex-wrap属性：如果一条轴线放不下，如何换行

nowrap:默认值，不换行
wrap: 换行，第一行在上方
wrap-reverse：换行，第一行在下方

flex-flow属性：flex-direction属性和flex-wrap属性的简写形式

row nowrap : 默认值

justify-content属性：主轴上的对齐方式

flex-start: 左对齐
flex-end: 右对齐
center: 水平居中
space-between: 两端对齐，项目之间的间隔都相等
space-around: 环绕对齐，项目之间的间隔是两端间隔的两倍

align-items：交叉轴上的对齐方式

flex-start: 交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴居中对齐
baseline：第一行文字的基线对齐 
stretch：默认值，拉伸对齐。子项目将占满整个容器高度

align-content: 多根轴线时，对齐方式，类似justify-content或 align-items

项目属性（6个）

order：项目排列顺序，数字越小越靠前，默认为0

flex-grow：项目放大比例，默认为0，既该项目占剩余空间的比例

flex-shrink：项目缩小比例，默认为1

flex-basis：项目在分配多余空间之前，项目占据的主轴空间

flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为：0 1 auto

align-self：单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

auto：默认值 
flex-start
flex-end
center
baseline
stretch