站内搜索

CSS3弹性盒模型flex box快速入门 2016.03.16

为了做移动端的前端项目开始学flex啦～！用了flex，再也不用担心排版啦。一起来快速上手吧！在css上使用flex的语法

如在下面html代码中, ul为父元素，li为子元素。

<ul class="example">
<li>ali>
<li>bli>
<li>cli> ul>

使用flex应在父元素中加入以下css样式：

.example {
display: flex;
display: ">/* 兼容chrome */
display: -moc-flex;/* 兼容firefox */
display: -o-flex;/* 兼容opera */
} flex-direction
(适用于父类容器元素)flex-direction:row;
  • a
  • b
  • c
flex-direction:row-reverse;
  • a
  • b
  • c
flex-direction:column;
  • a
  • b
  • c
flex-direction:column-reverse;
  • a
  • b
  • c
flex-wrap
(适用于父类容器元素)设置或检索伸缩盒对象的子元素超出父容器时是否换行。
flex-wrap: nowrap | wrap | wrap-reverseflex-wrap:nowrap;
  • a
  • b
  • c
flex-wrap:wrap;
  • a
  • b
  • c
flex-wrap:wrap-reverse;
  • a
  • b
  • c
flex-flow
(适用于父类容器元素)相当于direction和wrap的集合
flex-flow: row nowrap;/* 顺序排列且不换行 */
flex-flow:row-reverse wrap;/* 反序排列且自动换行 */justify-content
(适用于父类容器元素)设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
justifu-content: flex-start | flex-end | center | space-between | space-aroundjustify-content:flex-start;
  • a
  • b
  • c
justify-content:flex-end;
  • a
  • b
  • c
justify-content:center;
  • a
  • b
  • c
justify-content:space-between;
space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
  • a
  • b
  • c
justify-content:space-around;
space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
  • a
  • b
  • c
align-items
(适用于父类容器元素)设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretchalign-items:flex-start;
  • a
  • b
  • c
align-items:flex-end;
  • a
  • b
  • c
align-items:center;
  • a
  • b
  • c
align-items:baseline;
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
  • a
  • b
  • c
align-items:strecth;
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
  • a
  • b
  • c

align-content
(适用于父类容器元素) 设置或检索弹性盒堆叠伸缩行的对齐方式。
align-content: flex-start | flex-end | center | space-between | space-around | stretch align-content:flex-start;
  • a
  • b
  • c
  • d
  • e
  • f
align-content:flex-end;
  • a
  • b
  • c
  • d
  • e
  • f
align-content:center;
  • a
  • b
  • c
  • d
  • e
  • f
align-content:space-between;
  • a
  • b
  • c
  • d
  • e
  • f
align-content:space-around;
  • a
  • b
  • c
  • d
  • e
  • f
align-content:strecth;
  • a
  • b
  • c
  • d
  • e
  • f
flex-grow
(适用于子元素) 设置或检索弹性盒的扩展比率。根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。本例中b,c两项都显式的定义了flex-grow，可以看到总共将剩余空间分成了4份，其中b占1份，c占3分，即1:3
flex-grow: (default 0)
  • a
  • b
    flex-grow:1
  • c
    flex-grow:2
  • d
  • e
flex-shrink
(适用于子元素) 设置或检索弹性盒的收缩比率（根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
flex-shrink: (default 1) flex-basis
(适用于子元素) 设置或检索弹性盒伸缩基准值。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间
flex-basis: (可百分比表示) | auto (default auto)
  • a
  • b
  • c
    flex-basis:600px;
  • d
  • e
flex(复合属性)
(适用于子元素) flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
none：none关键字的计算值为: 0 0 auto
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。
  • 上一篇：table表格中的内容溢出布局方式
  • 下一篇：css特效