css-flex布局

作者: 前端喵 | 来源:发表于2018-04-02 16:48 被阅读0次

css-flex布局
【原创】Css-flex 布局
css-flex布局知识梳理
CSS-Flex 布局教程：实例篇
CSS-Flex 布局教程：语法篇
CSS-Flex
CSS-Flex
css-flex
用CSS-flex写个骰子
CSS-flex常见面试题

1.flex布局的兼容性写法

关于flex布局的兼容性，参考flex兼容性

.flex{

display:-webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

}

flex布局中有两波属性，一波作用在flex盒子上，一波作用在flex盒子内部的元素（也叫项目）上

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

2.作用在flex盒子上的属性

•flex-direction row | row-reverse | column | column-reverse

•flex-wrap nowrap| wrap|wrap-reverse

•flex-flow rownowrap

•justify-content center|space-between|space-around|flex-start|flex-end

•align-items center|baseline|stretch|flex-start|flex-end

2.1 flex-direction row | row-reverse | column |column-reverse

该属性定义主轴的方向，即项目的排列方向，容器的属性中有的是主轴方向的属性，有的是交叉轴方向的属性，合理的定义主轴的方向可以更好的布局。

row：默认属性，主轴为水平方向，起点在左端；row-reverse:主轴为水平方向，起点在右端

flex-direction:row

flex-direction:row-reverse

column：主轴为垂直方向，起点在上方；column-reverse：主轴为垂直方向，起点在下方

flex-direction:column（左） flex-direction:column-reverse（右）

2.2 flex-wrap nowrap| wrap|wrap-reverse

该属性决定容器内的项目排列是否换行，怎么换行

nowrap：默认属性，不换行

flex-wrap : nowrap

wrap:正常换行

flex-wrap : wrap

wrap-reverse:第一行在下面

flex-wrap : wrap-reverse

2.3flex-flow

是前两个属性的综合，第一个参数是flex-direction，第二个属性是flex-wrap，两个属性的取值任意组合，默认是row nowrap，用集合表示为

A={row,row-reverse , column ,column-reverse }

B={nowrap,wrap,wrap-reverse }

flex-flow:[a ] [b]，其中a属于集合A，b属于集合B

2.4justify-content

center|space-between|space-around|space-evenly|flex-start|flex-end

定义主轴方向上的对齐方式

center：在主轴方向上居中

justify-content ： center

space-between：第一个和最后一个项目抵边。各个项目之前的间距平分剩余空间，即将主轴的剩余空间等分成 n-1（n是项目的个数）份，每两个项目之间的间距都占一份

justify-content ： space-between

space-around：各个项目之前的间距是首尾两个项目与边缘间距的2倍，即将主轴的剩余空间等分成2n（n是项目的个数）份，每个项目的两边都占一份，也就是说两个项目的间距是2分，项目距离两个端的距离是1份

justify-content ： space-around

space-evenly：容器边缘到项目的间距与两个项目之间的间距相等（浏览器支持较差），即将主轴的剩余空间等分成 n+1（n是项目的个数）份，两个项目之间以及项目到端点的距离都是1份

justify-content ：space-evenly

flex-start：默认属性，与主轴开始的位置对齐

justify-content ： flex-start

flex-end:与主轴的末端对齐

justify-content ： flex-end

举个栗子，做项目的过程中遇到一个首页展示三个栏目的情况，这三个栏目整体居中，中间有间隔

我的栗子

2.5 align-items

center|baseline|stretch|flex-start|flex-end

定义交叉轴方向上的对齐方式

center：在交叉轴方向上居中排列

align-items： center

baseline：项目的第一行文字对齐

align-items ： baseline

stretch：如果项目没有设置高度就会在交叉轴上占满整个容器

align-items ： stretch

flex-start：交叉轴的起始位置对齐

flex-end：交叉轴的末端对齐

举个主轴交叉轴都对齐的栗子

align-items ： center；justify-content ：center

2.6 align-content

center|space-between|space-around|space-evenly|flex-start|flex-end

定义多条轴线的对齐方式

center：在交叉轴方向上居中

align-content:center

space-between：第一个和最后一个项目抵边。各个项目之前的间距平分剩余空间

align-content:space-between

space-around：各个项目之前的间距是首尾两个项目与边缘间距的2倍

align-content: space-around

space-evenly：容器边缘到项目的间距与两个项目之间的间距相等（浏览器支持较差）

align-content: space- evenly

flex-start：默认属性，与交叉轴开始的位置对齐

align-content:flex-start

flex-end:与交叉轴的末端对齐

align-content:flex-end

3.项目的属性

•order：项目的排列顺序，默认0，数字越小排列越靠前

•flex-grow：项目的放大比例，默认为0，即使有剩余空间也不放大，第一个项目的flex-grow为1，有剩余空间时第一个项目占满剩余空间，如图1所示，此时无论第一的项目的flex-grow的值为多少，第一个项目所占的空间都是容器剩余空间的大小；如果第一个项目的flex-grow为2，其他的为1，那么在有剩余空间时，所有的项目都会被放大，同时第一个项目的空间是其他项目所占空间的2倍，如图2所示