Flexbox基本概念
一个更简洁的制作智能布局的现代语法。
一个更简洁的制作智能布局的现代语法。
FlexBox （收缩的盒子）不禁让人联想到响应式布局，事实上正是如此，它提供一种智能、自动调整、灵活分配的布局方式。
Flex是什么
.d{
border: solid 1px red;
}
.d1{
width: 200px;
height: 200px;
background-color:blanchedalmond;
margin: 40px;
}
<div class="d">
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
</div>
以上这段代码呈现的效果是这样的：
如果我将外面的div改为Flex容器的话。
.d{
display: flex;/**修改div为flex容器*/
border: solid 1px red;
}
那么布局就会变成这样：
这个效果就像是float一样,并且，如果我将浏览器窗口进行缩放，还会发现：
是的，正如你看到的那样，为了保证子div元素能显示完全，flex容器会对子div自动进行了压缩，并且所有的子div的margin依然还保持在40px，当然，如果我拉伸放大窗口的话，所有的子元素是靠左排列的。
这就是flex容器的基本特性，灵活，智能，简洁，并且可以将任何元素作为一个flex容器，这时候需要注意的是，它的子元素就会变成flex items。
Flex容器属性
flex容器除了默认的基本特性之外，还拥有一些其它的可使用的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
flex-direction控制着在flex容器中的flex items排列的方式。
/*.d是flex容器*/
.d{
flex-direction: row;/*默认水平排列*/
flex-direction: column;/*垂直排列*/
}
row
column
flex-wrap
flex-wrap属性控制着flex容器是否允许flex items多行排列和flex items多行排列的方式。
/*.d是flex容器*/
.d{
flex-wrap: nowrap;/*默认不允许多行排列*/
flex-wrap: wrap;/*允许多行排列*/
flex-wrap: wrap-reverse;/*允许多行反向排列*/
}
nowrap
wrap
wrap-reverse
flex-flow
flex-wrap属性是flex-direction和flex-wrap两个属性合并的简写
/*.d是flex容器*/
.d{
flex-flow: row wrap;
}
.d{
flex-direction: row;
flex-wrap: wrap;
}
上面的两个样式的属性是一样的，所以：
flex-flow:flex-direction值 flex-wrap值
justify-content
justify-content控制着flex容器中的flex items的对齐方式。
/*.d是flex容器*/
.d{
justify-content: flex-start;/*默认让所有Flex items左对齐*/
justify-content: flex-end;/*让所有Flex items右对齐*/
justify-content: center;/*让所有Flex items居中对齐*/
justify-content: space-between;/*两边靠边，间距相等*/
justify-content: space-around;/*让所有Flex items外边距相等*/
}
flex-start
flex-end
center
space-between
space-around
align-items
align-items属性控制了flex容器中的flex items垂直对齐方式和高度
/*.d是flex容器*/
.d{
align-items: stretch;/*默认，让所有的flex items和flex容器高度相等*/
align-items: flex-start;/*让所有Flex items顶部对齐*/
align-items: flex-end;/*让所有Flex items底部对齐*/
align-items: center;/*让所有Flex items居中对齐*/
align-items: baseline;/*让所有Flex items沿着自己的基准线对齐*/
}
stretch
flex-start
flex-end
center
baseline(基准线为红线)
align-content
align-content属性用于多行的Flex容器。它也是用来控制Flex items在Flex容器里的排列方式，排列效果和align-items值一样。
/*.d是flex容器*/
.d{
align-items: stretch;/*默认，让所有的flex items和flex容器高度相等*/
align-items: flex-start;/*让所有Flex items顶部对齐*/
align-items: flex-end;/*让所有Flex items底部对齐*/
align-items: center;/*让所有Flex items居中对齐*/
}
Flex items属性
- order
- flex-grow
- flex-shrink
- flex-basis
order
order可以对flex items进行顺序的排列，所有的flex items的order默认都是0，所以flex items会按照元素的前后顺序进行排列，如果改变flex items的order，使之为1，则元素优先往后面排列，如果order小于0，则元素优先往前面排列。
/*.d是flex items*/
.d :nth-child(1){
order: 1;/*改变第一个flex item的order为1*/
}
效果
/*.d是flex items*/
.d :nth-child(2){
order: 1;/*改变第二个flex item的order为1*/
}
效果
/*.d是flex items*/
.d :nth-child(1){
order: 1;/*改变第一个flex item的order为1*/
}
.d :nth-child(2){
order: 1;/*改变第二个flex item的order为1*/
}
两个flex item的order都为1，默认按照元素的前后顺序排列
/*.d是flex items*/
.d :nth-child(3){
order: -1;
}
.d :nth-child(4){
order: -1;
}
当两个flex item的order为-1的时候
flex-grow和flex-shrink
flex-grow和flex-shrink控制着flex items在flex容器空间富裕时和空间不足时如何缩放。
在flex容器中放两个默认属性的flex item
当我设置第二个item的flex-grow为1时
/*.d是flex item*/
.d :nth-child(2){
flex-grow: 1;
}
效果
同理当我设置第1个item的flex-grow为1时
/*.d是flex item*/
.d :nth-child(1){
flex-grow: 1;
}
两个item的flex-grow都为1时
/*.d是flex item*/
.d :nth-child(1){
flex-grow: 1;
}
.d :nth-child(2){
flex-grow: 1;
}
默认情况下，当你flex items填满flex容器的时候，你对flex容器拖动缩小，flex items也会跟着缩小，这也就意味着flex-shrink在默认情况下是打开的，它的默认值是1.
flex-basis
flex-basis决定着flex items的初始大小，它的默认值是：auto
当我不设置flex item的大小的时候，flex item会根据它里面的内容和flex容器的大小自动调节本身的大小。
.d :nth-child(1){
flex-basis: auto;/*默认值*/
}
当然，我们也可以手动调节flex items的大小，flex-basis的值也可以为：px、em、rem、%
.d :nth-child(1){
flex-basis: 200px;
}
flex
flex是flex-grow、flex-shrink和flex-basis三个属性的简写
.item{
flex:0 1 auto;
}
等于
.item{
flex-grow:1;
flex-shrink:0;
flex-basis:auto;
}
flex实现等分网格
.d :nth-child(1){
flex: 1 1 auto;
}
.d :nth-child(2){
flex: 2 1 auto;
}
.d :nth-child(3){
flex: 3 1 auto;
}
.d :nth-child(4){
flex: 4 1 auto;
}
flex容器被分成10份，每个flex item根据flex-grow的数字进行划分
