Flex 弹性盒子布局
CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。基本概念采用Flex布局的元素，称为Flex容器（container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（item），简称”...
CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。
基本概念
- 采用Flex布局的元素，称为Flex容器（container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（item），简称"项目"。
- 每个弹性框布局包含两个轴，弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(crossaxis)。
- 弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(crossstart)/**侧轴终点(cross end)**描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由
writing-mode确立的方向（从左到右、从右到左，等等）。 - 根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size)，对应侧轴的称为侧轴尺寸(cross size)。
下面是主轴为水平方向的弹性容器及其项目
容器属性
- display：
flex|inline-flex
将元素定义为弹性容器，其子元素则成为弹性项目。
值 flex 使弹性容器成为块级元素。值 inline-flex 使弹性容器成为单个不可分的行内级元素。
- flex-direction：
row|row-reverse|column|column-reverse
该属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。
row和row-reverse表示主轴的方向为水平轴，其轴方向受容器文本方向影响。当direction属性为ltr时，row表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 direction 属性是 rtl，row表示从右到左定向的轴，而 row-reverse 表示从左到右。
column表示主轴方向为垂直轴
- flex-wrap：
nowrap|wrap|wrap-reverse
用于指定Flex子项是否换行
nowrap表示元素被放在一行，不换行，这可能导致溢出 flex 容器，为默认值。wrap表示换行。而wrap-reverse表示垂向上行排列的方向反转
- flex-flow：
<'flex-direction'>||<'flex-wrap'>
其是flex-direction 和 flex-wrap 的简写
element {
flex-flow: column-reverse wrap;
}
- justify-content：
flex-start|flex-end|center|space-between|space-around
用于指定主轴(水平方向)上Flex子项的对齐方式
flex-start表示与行的起始位置对齐；flex-end表示与行的结束位置对齐；center表示与行中间对齐；space-between表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于flex-start；space-around表示间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于center。
- align-items：
stretch|flex-start|flex-end|center|baseline
用于指定侧轴(垂直方向)上Flex子项的对齐方式
stretch表示弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度（默认值，当项目未设置高度或为auto时被拉伸）；flex-start表示与侧轴开始位置对齐；flex-end表示与侧轴的结束位置对齐；center表示与侧轴中间对齐；baseline表示基线对齐，当行内轴与侧轴在同一线上，即所有Flex子项的基线在同一线上时，效果等同于flex-start
- align-content：
flex-start|flex-end|center|space-between|space-around|stretch
该属性只作用于多行的情况下，用于多行的对齐方式
stretch表示拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行；flex-start表示各行与侧轴开始位置对齐，第一行紧靠侧轴开始边界，之后的每一行都紧靠前面一行；flex-end表示各行与侧轴的结束位置对齐，最后一行紧靠侧轴结束边界，之后的每一行都紧靠前面一行；center表示各行与侧轴中间对其；space-between表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数时，效果等同于flex-start；space-around表示各行之间间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数时，效果等同于center；
项目属性
- order：数字
该属性用来指定Flex子项的排列顺序，数值越小，越靠前，可以为负数，默认为0，数值相同时按照源码中的顺序排列 - flex-grow：数字
项目的拉伸因子，当有剩余空间时，项目会根据各自的拉伸因子进行拉伸。默认为0（不拉伸），负值无效。
例如，当项目拉伸因子都为1时，表示他们等分剩余空间，如果此时某一项的拉伸因子为2，那么它占据的剩余空间将比其他项多一倍
- flex-shrink：数字
项目的缩小比例，默认为1，负值无效。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
例如，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
- flex-basis：
auto|content| 宽度
指定了 flex 元素在主轴方向上的初始大小，默认为auto。
content表示自动调整项目宽度；宽度表示设置宽度（可以使用px，百分比等）；auto表示如果项目没有设置宽度，则使用content。
- flex：
none| [<'flex-grow'><'flex-shrink'>? ||<'flex-basis'>]
是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto) - align-self：
auto|flex-start|flex-end|center|baseline|stretch
用来单独指定某Flex子项的对齐方式
auto表示默认值，查找父元素的align-items值，如果没有父元素则取值为stretch；其他值同align-items属性
推荐资料：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
##示例##
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
#container{
background-color:gray;
width:350px;
height:450px;
display:flex;
flex-direction:row;
}
.item{
background:yellow;
width:100px;
height:100px;
border:3px solid red;
text-align:center;
line-height:100px;
}
</style>
</head>
<body>
<div id="container">
<div class="item" id="item_1">1</div>
<div class="item" id="item_2">2</div>
<div class="item" id="item_3">3</div>
<div class="item" id="item_4">4</div>
<div class="item" id="item_5">5</div>
<div class="item" id="item_6">6</div>
<div class="item" id="item_7">7</div>
<div class="item" id="item_8">8</div>
</div>
</body>
</html>
flex-direction:row
flex-direction:row-reverse
flex-direction:column
flex-wrap:wrap
flex-wrap:wrap-reverse
justify-content:flex-start
justify-content:flex-end
justify-content:center
justify-content:space-between
justify-content:space-around
align-items:stretch（项目未设置高度）
align-items:flex-start
align-items:flex-end
align-items:center
align-items:baseline（项目5的字体略大，基线位置被改变）
align-content:flex-start
align-content:flex-end
align-content:center
align-content:space-between
align-content:space-around
align-content:stretch(项目未设置高度)
order(改变第一行3个项目order)
#item_1{
order:2;
}
#item_2{
order:3;
}
#item_3{
order:1;
}
flex-grow
#item_1{
flex-grow:1;
}
flex-shrink
#item_2{
flex-shrink:2;
}
flex-basis
#item_2{
flex-basis:200px;
}
align-self
#item_2{
align-self:flex-end;
}
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)