web前端开发篇(6)---flex布局详解

布呐呐na 2024-08-18 16:03:01 阅读 54

1 flex布局原理

flex是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。

当我们为父盒子设为flex布局后,子元素的float、clear和vertical-align属性将失效伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局父盒子称为容器container,子元素称为项目item

布局原理:通过给父盒子添加flex属性,来控制盒子的位置和排列方式,

2 常见父项属性

flex-direction:设置主轴方向justify-content:设置主轴上的子元素排列方式flex-wrap:设置子元素是否换行align-content:设置侧轴上的子元素的排列方式(多行)align-items:设置侧轴上的子元素排列方式(单行)flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap

(1)主轴与侧轴

在flex布局中,是分为主轴和侧轴两个方向:

默认主轴方向是x轴方向,水平向右默认侧轴方向是y周方向,垂直向下

(2)flex-direction设置主轴的方向

主轴和侧轴是可以变化的,就看flex-direction设置谁为主轴,另一个即为侧轴。可设置的属性值有:

row:默认值,从左到右row-reverse:从右到左column:从上到下column-reverse:从下到上

(3)justify- content设置主轴上的子元素排列方式

使用这个属性时,一定要确定好哪个方向是主轴,可设置的属性值:

flex-start:默认值,从头部开始(如果主轴是x轴,则从左到右)flex-end:从尾部开始center:在主轴居中对齐(如果主轴是x轴,则水平居中)space-around:平分剩余的空间space-between:先两边贴边,再平分剩余空间

(4)flex-wrap设置子元素是否换行

flex布局中,默认的子元素是不换行的,如果一行装不下,会缩小每个子元素的宽度,可设置的属性值:

nowrap:默认值,不换行wrap:换行

(5)align-items设置侧轴上的子元素排列方式(单行)

该属性控制子元素在侧轴上的排列方式,在子元素为单项的时候使用,可以设置的属性值:

flex-start:默认值,从上到下flex-end:从下到上center:居中stretch:拉伸(使用此属性值,子元素不能设置高度,否则没有效果)

(6)align-content设置侧轴上的子元素的排列方式(多行)

该属性只能用于子项出现换行的情况(多行),在单行下是没有效果的,可设置的属性值:

flex-start:默认值,在侧轴的头部开始排列flex-end:在侧轴的尾部开始排列center:居中space-around:子项在侧轴平分剩余空间space-between:子项在侧轴先分布在两头,再平分剩余空间stretch:设置子项元素高度平分父元素高度

(7)align-items和align-content的区别

align-item适用于单行情况,只有上对齐、下对齐、居中和拉伸align-content适用于多行(换行)的情况下(单行设置其效果无效),可以设置上对齐、下对齐、居中、拉伸以及平分剩余空间等属性值总结就是单行用align-items,多行用align-content

(8)flex-row

flex-row属性是flex-direction和flex-wrap属性的复合属性。

3 常见子项属性

flex:子项目占的份数align-self:控制子项再侧轴的排列方式order:定义子项的排列顺序(前后顺序)

(1)flex属性

flex属性定义子项目分配到的剩余空间,表示占多少份数,属性值为number,默认值为0。

(2)align-self控制子项自己在侧轴上的排列方式

align-self属性允许单个子项设置与其他子项不同的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性。

(3)order属性定义项目的排列顺序

数值越小,排列越靠前,属性值为number,默认为0,也可以为负值。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。