前端交流圈

前端布局display:flex

2019-02-10  本文已影响4人  lulu_c

前端崽对这个布局方式应该都不陌生。Flex是Flexible Box弹性盒子的缩写,任何一个容器都可以指定为Flex布局,因此,给盒子模型提供了多样化的灵活性。


兼容性
display: flex;
display: inline-flex; // 将对象作为内联块级弹性伸缩盒显示

基本概念:

采用Flex布局的元素,被称为Flex容器(flex container),简称“容器”。其所有子元素自动成为容器成员,成为Flex项目(Flex item),简称“项目”。容器默认存在两根主轴:水平方向主轴(main axis)和垂直方向交叉轴(cross axis),项目默认沿主轴排列。

flex盒子

容器有六个属性:

接下来我们一个个属性看,

flex-direction属性:容器内项目的排列方向(默认横向排列)
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap属性:容器内项目换行方式
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow属性:flex-direction和flex-wrap的简写,默认row nowrap
flex-flow: row nowrap;
justify-content属性:项目在主轴上的对齐方式(主轴究竟是哪个轴要看属性flex-direction的设置)
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items属性:项目在交叉轴上如何对齐(对齐方式与交叉轴的方向有关)
align-items: flex-start | flex-end | center | baseline | stretch;
align-content属性:定义多根轴线的对齐方式

如果项目只有一根轴线,该属性不起作用,所以必须设置flex-wrap分行

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目的属性

每个项目自身有六个属性

align-self: auto | flex-start | flex-end | center | baseline | stretch;
上一篇 下一篇

猜你喜欢

热点阅读