html设置弹性盒子分配自适应比例,移动端弹性布局flex，CSS3自适应

1、Flex布局

今天整理了一些关于Flex布局，参考了好多大神的杰做php

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。css

任何一个容器均可以指定为Flex布局。html

.box{

display: flex;

}

行内元素也可使用Flex布局。web

.box{

display: inline-flex;

}

Webkit内核的浏览器，必须加上-webkit前缀。浏览器

.box{

display: -webkit-flex; /* Safari */

display: flex;

}

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

2、基本概念

采用Flex布局的元素，称为Flex容器(flex container)，简称”容器”。它的全部子元素自动成为容器成员，称为Flex项目(flex item)，简称”项目”。布局

[外链图片转存失败(img-RRTXDeW1-1564145870108)(E:\Word\JACK\笔记\flex.assets\3791e575c48b3698be6a94ae1dbff79d.png)]测试

容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫作main start，结束位置叫作main end；交叉轴的开始位置叫作cross start，结束位置叫作cross end。flex

项目默认沿主轴排列。单个项目占据的主轴空间叫作main size，占据的交叉轴空间叫作cross size。spa

3、容器的属性

容器的属性//如下6个属性设置在容器上。

flex-direction

属性规定灵活项目的方向

flex-wrap

属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

flex-flow

符合属性(flex-direction flex-wrap)

justify-content

用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式

align-items

属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

align-content

属性在弹性容器内的各项没有占用交叉轴上全部可用的空间时对齐容器内的各项(垂直)。

项目的属性//如下6个属性设置在项目上。

align-self

属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。

flex-grow

属性定义项目的放大比例，默认为0，即若是存在剩余空间，也不放大

order

属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-shrink

属性定义了项目的缩小比例，默认为1，即若是空间不足，该项目将缩小。

flex-basis

属性定义了在分配多余空间以前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的原本大小。

flex

属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex-direction //属性规定灵活项目的方向

flex-direction

属性规定灵活项目的方向

row

默认值。灵活的项目将水平显示，正如一个行同样。

row-reverse

与 row 相同，可是以相反的顺序。

column

灵活的项目将垂直显示，正如一个列同样。

column-reverse

与 column 相同，可是以相反的顺序。

initial

设置该属性为它的默认值。请参阅 initial。

inherit

从父元素继承该属性。请参阅 inherit。

flex-wrap //属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

flex-wrap

属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

nowrap

默认值。规定灵活的项目不拆行或不拆列。

wrap

规定灵活的项目在必要的时候拆行或拆列。

wrap-reverse

规定灵活的项目在必要的时候拆行或拆列，可是以相反的顺序。

initial

设置该属性为它的默认值。请参阅 initial。

inherit

从父元素继承该属性。请参阅 inherit。

justify-content //用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式

justify-content

用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式

flex-start

默认值。项目位于容器的开头。

flex-end

项目位于容器的结尾。

center

项目位于容器的中心。

space-between

项目位于各行之间留有空白的容器内。

space-around

项目位于各行以前、之间、以后都留有空白的容器内。

initial

设置该属性为它的