网站设计与网页制作代码大全,新手怎么做网站,锡林郭勒盟建设工程造价管理网站,广告联盟排行1 Flex: 弹性布局 (转)
任何一个容器都可以指定为 Flex 布局。 1 .box {2 display: flex;3 } 行内元素也可以使用 Flex 布局。 1 .box{2 display: inline-flex;3 } 注意#xff0c;设为 Flex 布局以后#xff0c;子元素的
float、
clear 和
vertical-align 属性将失效…
1 Flex: 弹性布局 (转)
任何一个容器都可以指定为 Flex 布局。 1 .box {
2 display: flex;
3 } 行内元素也可以使用 Flex 布局。 1 .box{
2 display: inline-flex;
3 } 注意设为 Flex 布局以后子元素的
float、
clear 和
vertical-align 属性将失效。2 Flex: 基本概念
采用 Flex 布局的元素称为 Flex 容器flex container简称容器。它的所有子元素自动成为容器成员称为 Flex 项目flex item简称项目。 容器默认存在两根轴水平的主轴main axis和垂直的交叉轴cross axis。主轴的开始位置与边框的交叉点叫做
main start结束位置叫做
main end交叉轴的开始位置叫做
cross start结束位置叫做
cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做
main size占据的交叉轴空间叫做
cross size。3 容器的属性 flex-direction // 属性决定主轴的方向即项目的排列方向
flex-wrap // 属性定义如果一条轴线排不下如何换行
flex-flow // 属性是flex-direction属性和flex-wrap属性的简写形式默认值为 row nowrap
justify-content // 属性定义了项目在主轴上的对齐方式
align-items // 属性定义项目在交叉轴上如何对齐。
align-content // 属性定义了多根轴线的对齐方式。如果项目只有一根轴线该属性不起作用 3.1 flex-direction属性 flex-direction 属性决定主轴的方向即项目的排列方向。.box {
flex-direction: row | row-reverse | column | column-reverse;
} 它可能有 4 个值 1 row默认值 主轴为水平方向起点在左端。
2 row-reverse 主轴为水平方向起点在右端。
3 column 主轴为垂直方向起点在上沿。
4 column-reverse 主轴为垂直方向起点在下沿。 3.2 flex-wrap属性
默认情况下项目都排在一条线又称轴线上。
flex-wrap 属性定义如果一条轴线排不下如何换行。1 .box{
2 flex-wrap: nowrap | wrap | wrap-reverse;
3 } 它可能取三个值。
1
nowrap默认不换行。2
wrap换行第一行在上方。3
wrap-reverse换行第一行在下方。3.3 flex-flow flex-flow属性是
flex-direction 属性和
flex-wrap 属性的简写形式默认值为row nowrap。1 .box {
2 flex-flow: flex-direction || flex-wrap;
3 } 3.4 justify-content属性 justify-content 属性定义了项目在主轴上的对齐方式。1 .box {
2 justify-content: flex-start | flex-end | center | space-between | space-around;
3 } 它可能取5个值具体对齐方式与轴的方向有关。下面假设主轴为从左到右。 1 flex-start默认值左对齐
2 flex-end右对齐
3 center 居中
4 space-between两端对齐项目之间的间隔都相等。
5 space-around每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。 3.5 align-items属性 align-items 属性定义项目在交叉轴上如何对齐1 .box {
2 align-items: flex-start | flex-end | center | baseline | stretch;
3 } 它可能取5个值。具体的对齐方式与交叉轴的方向有关下面假设交叉轴从上到下。 1 flex-start交叉轴的起点对齐。
2 flex-end交叉轴的终点对齐。
3 center交叉轴的中点对齐。
4 baseline: 项目的第一行文字的基线对齐。
5 stretch默认值如果项目未设置高度或设为auto将占满整个容器的高度。 3.6 align-content属性 align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线该属性不起作用。1 .box {
2 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
3 } 该属性可能取6个值。 1 flex-start与交叉轴的起点对齐。
2 flex-end与交叉轴的终点对齐。
3 center与交叉轴的中点对齐。
4 space-between与交叉轴两端对齐轴线之间的间隔平均分布。
5 space-around每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍。
6 stretch默认值轴线占满整个交叉轴。 4、项目的属性
以下6个属性设置在项目上。 1 order
2 flex-grow
3 flex-shrink
4 flex-basis
5 flex
6 align-self 4.1 order属性 order属性定义项目的排列顺序。数值越小排列越靠前默认为 0。1 .item {
2 order: integer;
3 } 4.2 flex-grow属性 flex-grow 属性定义项目的放大比例默认为
0即如果存在剩余空间也不放大。1 .item {
2 flex-grow: number; /* default 0 */
3 } 如果所有项目的
flex-grow 属性都为1则它们将等分剩余空间如果有的话。如果一个项目的
flex-grow 属性为2其他项目都为1则前者占据的剩余空间将比其他项多一倍。4.3 flex-shrink属性 flex-shrink 属性定义了项目的缩小比例默认为1即如果空间不足该项目将缩小。1 .item {
2 flex-shrink: number; /* default 1 */
3 } 如果所有项目的
flex-shrink 属性都为1当空间不足时都将等比例缩小。如果一个项目的
flex-shrink 属性为0其他项目都为1则空间不足时前者不缩小。负值对该属性无效。
4.4 flex-basis属性 flex-basis属性定义了在分配多余空间之前项目占据的主轴空间main size。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为
auto即项目的本来大小。1 .item {
2 flex-basis: length | auto; /* default auto */
3 } 它可以设为跟
width或
height属性一样的值比如350px则项目将占据固定空间4.5 flex属性 flex属性是
flex-grow,
flex-shrink 和
flex-basis的简写默认值为
0 1 auto。后两个属性可选。1 .item {
2 flex: none | [ flex-grow flex-shrink? || flex-basis ]
3 } 该属性有两个快捷值
auto (
1 1 auto) 和 none (
0 0 auto)。建议优先使用这个属性而不是单独写三个分离的属性因为浏览器会推算相关值。
4.6 align-self属性 align-self属性允许单个项目有与其他项目不一样的对齐方式可覆盖
align-items属性。默认值为
auto表示继承父元素的
align-items属性如果没有父元素则等同于
stretch。1 .item {
2 align-self: auto | flex-start | flex-end | center | baseline | stretch;
3 } 该属性可能取6个值除了auto其他都与align-items属性完全一致。
5 注
本文转自阮一峰的网络日志 本文转载于:猿2048➧https://www.mk2048.com/blog/blog.php?idh0ajakkjtitleFlex弹性布局
