flex布局笔记

Flex容器属性共6个属性

flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

 

flex-direction

flex-direction属性有四个属性值，控制Flex项目沿着主轴的排列方向。

row (水平排列)

column(垂直排列) 

row-reverse(水平反向) 

column-reverse(垂直反向)

 

flex-wrap

flex-wrap属性有三个属性值：wrap || nowrap || wrap-reverse;

wrap(会换行排列)

nowrap(不会换行排列)

wrap-reverse(会换行排列，但反向)

 

flex-flow

flex-flow是flex-direction和flex-wrap两个属性的速记属性。

flex{
     flex-flow: row wrap;
}

flex{
    flex-direction: row; 
    flex-wrap: wrap;
}

这两个flex样式的效果是相同的。都是水平排列+换行。

flex-flow:column wrap 为垂直排列+换行。

 

justify-content

justify-content属性可以接受下面五个值之一：flex-start || flex-end || center || space-between || space-around

flex-start(左对齐)

flex-end(右对齐)

center(居中对齐)

space-between(两端对齐（除第一个和最后一个间距相同）)

space-around(间距都相同（但第一个的开始和最后一个结束是其它间距的一半）)

align-items

align-items属性可以接受这些属性值：flex-start || flex-end || center || stretch || baseline

flex-start(顶部对齐)

flex-end(底部对齐)

center(居中对齐)

stretch(高度会和容器高度一样)

baseline(沿自己的基线对齐（主要用于容器高度不一样时，让文字基线对齐）)

align-content

align-content属性用于多行的Flex容器(即wrap属性)。它也是用来控制Flex项目在Flex容器里的排列方式

stretch(填满容器，里面的间距是flex项目自身设置的margin值)

flex-start(顶部对齐)

flex-end(底部对齐)

center(居中对齐)

Flex项目属性

order || flex-grow || flex-shrink || flex-basis

order(排序,从底到高,默认0,可接受正值或负值)

flex-grow和flex-shrink(可接受0或大于0的正数，属性控制Flex项目在容器有多余的空间如何放大（扩展），在没有额外空间又如何缩小。)

flex-basis(默认为auto，宽度会自动调整根据flex项目中的内容)当给了宽度 (可以取任何用于width属性的任何值。比如 % || em || rem || px等)

flex速记

flex是flex-grow、flex-shrink和flex-basis三个属性的速记（简写）

li {
    flex: 0 1 auto;     
}

li {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

这两段相等。

注意它们之间的顺序。flex-grow第一，然后是flex-shrink，最后是flex-basis。缩写成GSB，可以帮助你更好的记忆。

align-self（改变一个弹性项目沿着侧轴的位置，而不影响相邻的弹性项目）

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