知识来源:
https://blog.csdn.net/cddcj/article/details/52131089
https://www.runoob.com/w3cnote/flex-grammar.html
在线实验:
https://www.runoob.com/try/try.php?filename=trycss3_flex-direction
弹性布局 flex 具有很方便的布局能力,但是部分浏览器对 flex 并不是很友好
1.指定flex布局
.box{ display:flex; display: -webkit-flex; /* 兼容苹果的浏览器Safari */ }
行内元素也可以使用Flex布局。
.box{ display:inline-flex }
注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
容器默认存在两根轴:
1、水平的主轴(main axis):开始位置(与边框的交叉点)叫做 main start,结束位置叫做main end;
2、垂直的交叉轴(cross axis):开始位置叫做cross start,结束位置叫做cross end。
项目默认沿水平排列(主轴)。单个项目占据的水平主轴空间叫做 main size,占据的垂直交叉轴空间叫做 cross size。
2.容器属性
2.1、flex-direction: 属性决定 子元素 的 排序方向(上到下,或左到右)
可以设置为:
—》flex-direction:row 水平,靠左上角 且 正序
—》flex-direction:row-reverse 水平,靠右上角 且 倒序(起点在右侧)
—》flex-direction:column 垂直,靠左上角 正序
—》flex-direction:column-reverse 垂直,靠左下角 倒序(起点底部)
注意: Internet Explorer 10 及更早版本浏览器不支持 flex-direction 属性。
注意: Safari 6.1 及更新版本通过 -webkit-flex-direction 属性支持该属性。
2.2、flex-wrap: 决定 子元素 换不换行,如何换行
Title可以设置为:
—》nowrap 不换行,但是 子元素 的宽度会被压缩
—》wrap 换行
—》wrap-reverse 换行,最后一行在顶部,第一行在下方
注意: Internet Explorer 10 及更早版本浏览器不支持 flex-wrap 属性。
注意: Safari 6.1 及更新版本通过 -webkit-flex-wrap 属性支持该属性.
2.3、flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
Title.box { flex-flow: <flex-direction> <flex-wrap>;
}
2.4、 justify-content: 子元素的对齐方式
可以设置为:
—》justify-content: flex-start 左对齐
—》justify-content: flex-end 右对齐
—》justify-content: center 居中
—》justify-content: space-between 两端对齐贴紧,项目间间隔相等
—》justify-content: space-around 每个项目两两间隔相
注意: Internet Explorer 10 及更早版本浏览器不支持 justify-content 属性。
注意: Safari 6.1 及更新版本通过 -webkit-justify-content 属性支持该属性。
2.5、align-items 定义项目在 垂直 交叉轴上如何对齐
Title—》align-items: flex-start 元素位于容器的开头
—》flex-end 元素位于容器的结尾。
—》center 垂直居中
—》baseline 元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
—》stretch 默认值。元素被拉伸以适应容器:未设或auto,将占满整个容器高度
注意: Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。
注意: Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。
2.6、align-content 针对用于 容器 下的 多行 子元素 进行 位置布局(一般与flex-wrap配合使用),如果没用拥有多行子元素,则失效;
解释不清,自己动手吧:https://www.runoob.com/try/try.php?filename=trycss3_align-content
这里还一个:https://www.runoob.com/try/playit.php?f=playcss_align-content&preval=stretch
(个人理解:align-content 一般应该是和flex-wrap进行配合使用,flex-wrap决定了多行的子元素,而align-content决定了这些子元素的布局方式)
—》stretch; 默认值(initial)。元素被上下拉伸间距以适应容器。
—》center 子元素朝中心挤压,使元素位于容器的中心。(好像是垂直中心)
—》align-content: flex-start 子元素位于容器的开头(朝起始位置堆叠)
—》flex-end 子元素位于容器的结尾(朝结束位置堆叠)
—》space-between 子元素在各行在弹性盒容器中头尾置顶,空白处平均分布
—》space-around 子元素在弹性盒容器中平均分布。都拥有相同的上下间距
—》box-orient:horizontal 水平(默认)
—》vertical:垂直
—》inline-axis:子元素沿内联坐标轴(映射到横向)
—》block-axis:子元素沿块坐标轴(映射到垂直)
==================================================================下面是复制的了。。
4.项目属性
。order:项目的排列顺序
。flex
。flex-grow 放大比例
。flex-shrink 缩小比例
。flex-basis 主轴空间大小
。align-self 允许单个项目有与其他项目不一样的对齐方式
4.1 order 定义项目的排列顺序
-》order: <integer>;
数值越小,排列越靠前,默认为0;
4.2 flex-grow
-》 flex-grow: <number>; /* default 0 */
项目的放大比例,默认是0,即若存在剩余空间,也不放大。
flex-grow属性都为1,将等分剩余空间;
flex-grow属性为2,其他都为1,则前者占据的剩余空间比其他项多一倍。
4.3 flex-shrink
-》flex-shrink: <number>; /* default 1 */
项目的缩小比例,默认是1,即空间布局,该项目将缩小。
flex-shrink属性都为1,将等比例缩小;
若一个项目flex-shrink属性为0,其他都为1,则空间不足时,设为0的不缩小。
负值对该属性无效。
4.4 flex-basis
-》flex-basis: <length> | auto; /* default auto */
在分配多余空间之前,项目占据的主轴空间大小。默认为auto,即项目的本来大小。
被省略为0%,零尺寸。
4.5 flex
-》flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex属性是 flex-grow,flex-shrink,flex-basis缩写,默认为0 1 auto。
后两个属性可选。
该属性有两个快捷值:auto( 1 1 auto)和none( 0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
详细:其中<flex-basis>被省略默认为0%
<flex-basis>指定auto,取决于自身<width>,若宽没定义,则长度取决于内容。
flex:1 == flex: 1 1 0%;
flex:none == flex:0 0 auto;
flex:auto == flex:1 1 auto;
例如:<div>
<p id="p1">Hello</p>
<p>Hello</p>
</div>
div{ width:300px; display:flex; }
div #p1{ flex:1; }
【flex:1 意思是设置后DIV有灵活的长度,即其余auto宽度后, 剩余的的都是flex:1它的】
4.6 align-self
-》align-self: auto | flex-start | flex-end | center | baseline | stretch;
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。