flex左右布局_布局

1. 流式布局

百分比布局也叫作流式布局、弹性盒布局。手机网页没有版心&＃xff0c;都左右撑满。

百分比能够设置的属性是width、height、padding、margin。其他属性比如border、font-size不能用百分比设置的。

• 如果用百分比写width&＃xff0c;那么指的是父元素width的百分之多少。
• 如果用百分比写height&＃xff0c;那么指的是父元素height的百分之多少。
• 如果用百分比写padding&＃xff0c;那么指的是父元素width的百分之多少&＃xff0c;无论是水平的padding还是竖直的padding。
• 如果用百分比写margin&＃xff0c;那么指的是父元素width的百分之多少&＃xff0c;无论是水平的margin还是竖直的margin。
• 不能用百分比写border的宽度

2. Flex布局

flex布局表示弹性布局&＃xff0c;为盒状模型提供最大的灵活性。

使用时应该注意些什么&＃xff1f;

• 如果是Webkit内核的浏览器&＃xff0c;需要加上 -webkit 前缀
• 在父级元素设置为flex布局后&＃xff0c;子元素的float、clear、vertical-align属性都将失效&＃xff0c;所以在使用flex布局时&＃xff0c;不应该先设置完子元素布局后再使用。

flex布局中的一些基本概念

• 容器&＃xff1a;采用flex布局的元素被称作容器。父元素
• 项目&＃xff1a;在flex布局中的子元素被称作项目。子元素

容器中的主轴和交叉轴

在容器中默认有水平的主轴和垂直的交叉轴&＃xff0c;项目在容器中默认沿主轴排列

2.1 父元素的一些属性

有六个常用属性设置在父元素上&＃xff0c;分别为&＃xff1a;

• flex-direction容器主轴的方向
• flex-wrap
• flew-flow
• justify-content
• align-items
• align-content

1. flex-direction容器主轴的方向

• row: 默认值&＃xff0c;由左到右。
• row-reverse &＃xff1a;由右到左
• column&＃xff1a;由上到下
• column-reverse&＃xff1a;由下到上

2. flex-wrap 换不换行

• nowrap&＃xff1a;表示不换行 设置的项目的宽度就失效了&＃xff0c;强行在一行显示
• wrap&＃xff1a;正常换行&＃xff0c;第一个位于第一行的第一个
• wrap-reverse&＃xff1a;向上换行&＃xff0c;第一行位于下方

3. flex-flow 1 2合起来写

4. justify-content 横向对齐方式&＃xff0c;纵向撑满

• flex-start&＃xff1a;默认值&＃xff0c;左对齐
• flex-end&＃xff1a;右对齐
• center&＃xff1a;左右居中对齐
• space-between&＃xff1a;两端对齐
• space-around&＃xff1a;每个项目两侧的间距相等

5. align-items 在交叉轴(纵轴)上的对齐显示

• stretch&＃xff1a;默认值&＃xff1a;纵向撑满
• flex-start&＃xff1a;上对齐
• flex-end&＃xff1a;下对齐
• center&＃xff1a;垂直居中对齐
• baseline&＃xff1a;子元素第一行文字的基线对齐

6. align-content 4 5合起来写

• stretch&＃xff1a;先由左到右&＃xff0c;再从上到下&＃xff0c;纵向撑满&＃xff0c;有几行分几份
• flex-start&＃xff1a;先从左到右&＃xff0c;再从上到下&＃xff0c;挤到左上角
• flex-end&＃xff1a;先从左到右&＃xff0c;再从上到下&＃xff0c;挤到左下角
• center&＃xff1a;先从左到右&＃xff0c;再从上到下&＃xff0c;挤到中间靠左
• space-between&＃xff1a;先从左到右&＃xff0c;再从上到下&＃xff0c;纵向分上下
• space-around&＃xff1a;先从左到右&＃xff0c;再从上到下&＃xff0c;最外面的上下间距之和等于中间各个间距

2.2 子元素的一些属性

• order 排序的位置&＃xff0c;默认值为0&＃xff0c;数值越小越靠前
• flex-grow 属性
• flex-shrink 属性
• flex-basis属性
• flex属性
• align-self 属性

1. orde 排序的位置&＃xff0c;默认值为0&＃xff0c;数值越小越靠前

2 flex-grow 如何分配剩余空间

3. flex-shrink 超出空间怎么压缩

4. flex-basis item所占主轴空间&＃xff0c;优先级高于width

5. flex 2 3 4的和写 默认值为&＃xff1a;0 1 auto

6. align-self 当前项目可以和其他项目拥有不一样的对齐方式

3. rem布局

rem是相对于根元素的字体大小的单位

实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化html的字体大小来控制rem的大小,如不同html字体大小的计算下,rem值不同

html{font-size:100px;}设置成100px方便我们计算&＃xff0c;如 6rem等于600px。