【精选】弹性盒子(flexbox)布局属性详解 |
您所在的位置:网站首页 › flex的值有哪些 › 【精选】弹性盒子(flexbox)布局属性详解 |
弹性盒子布局属性详解
1 弹性盒子概述2 基本概念3 常用属性3.1 布局方向flex-direction3.2 环绕效果flex-wrap3.3 水平对齐方式justify-content3.4 交叉轴对齐方式align-items3.5 轴线对齐方式align-content
4 项目属性(item)4.1 排列顺序order4.2 放大比例flex-grow4.3 缩小比例flex-shrink4.4 单个对齐方式align-self4.5 综合属性flex
1 弹性盒子概述
Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式,主要表现在: 1、在不同方向排列元素 2、重新排列元素的显示顺序 3、更改元素的对齐方式 4、动态地将元素装入容器 2 基本概念采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
CSS样式如下: .d1, .d2, .d3 { /* 三个div都是长100宽100的正方形 */ width: 100px; height: 100px; } .d1 { background-color: pink; } .d2 { background-color: red; } .d3 { background-color: blue; }不使用弹性盒子效果为:
例如,.html文件中代码如下: 为d1,d2,d3设置CSS样式: .d { display: flex; } .d1, .d2, .d3 { width: 100px; height: 100px; } .d1 { background-color: pink; } .d2 { background-color: red; } .d3 { background-color: blue; }效果如下所示,flex-wrap属性默认值为nowrap,当窗体的宽度被拉到最小时,几个div不会换行,而是缩小自己的宽度适应窗口的宽度。
例如,.html文件中代码如下: flex-start:左对齐,默认值,CSS样式如下: .d { display: flex; justify-content: flex-start; }
例如,.html文件中代码如下: 在CSS样式中设置d2,d3的宽度和高度,但是不设置d1的高度,只设置宽度,那么就会出现d1的高度就是整个容器的高度的情况,默认值align-items: stretch;也是同样的效果: .d { display: flex; width: 500px; height: 150px; } .d1 { width: 100px; background-color: pink; } .d2 { width: 150px; height: 100px; background-color: red; } .d3 { width: 100px; height: 100px; background-color: blue; }
定义了多根轴线的对齐方式,如果项目只有一根轴线,那么该属性将不起作用. 属性值含义flex-start与交叉轴的起点对齐flex-end与交叉轴的终点对齐center与交叉轴的中点对齐。space-between与交叉轴两端对齐,轴线之间的间隔平均分布。space-around每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch默认值,轴线占满整个交叉轴。例如,.html文件中代码如下: 基础CSS样式如下: .d { width: auto; height: 300px; background-color: blanchedalmond; display: flex; /* 设置换行 */ flex-wrap: wrap; } .d1 { width: 100px; height: 50px; background-color: pink; border: 1px black solid; } .d2 { width: 120px; height: 100px; background-color: red; border: 1px black solid; } .d3 { width: 100px; height: 100px; background-color: blue; border: 1px black solid; }
order:项目的排列顺序,数字越小排列越靠前,默认为0。 例如,.html文件中代码如下: 初始CSS样式为: .d { display: flex; } .d1, .d2, .d3 { width: 100px; height: 100px; } .d1 { background-color: pink; } .d2 { background-color: red; } .d3 { background-color: blue; }
flex-grow:设置项目的放大比例,默认为0,即如果存在剩余空间,也不放大。 如果所有项目的flex-grow属性值都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性值为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。 例如,.html文件中代码如下: 当所有项目的flex-grow属性值都为1时,三个项目会平分剩余的宽度,CSS样式如下: .d { display: flex; } .d1, .d2, .d3 { height: 100px; } .d1 { background-color: pink; flex-grow: 1; } .d2 { background-color: red; flex-grow: 1; } .d3 { background-color: blue; flex-grow: 1; }
flex-shrink:设置项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。 例如,.html文件中代码如下: 将d1和d3的flex-shrink设置为1,d2的flex-shrink设置为0,则会看到空间不足时,只会压缩d1和d3的空间,不会压缩d2的空间,CSS样式如下: .d { display: flex; } .d1, .d2, .d3 { height: 100px; width: 300px; } .d1 { background-color: pink; flex-shrink: 1; } .d2 { background-color: red; flex-shrink: 0; } .d3 { background-color: blue; flex-shrink: 1; }空间未压缩效果: align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。 例如,.html文件中代码如下: 基础CSS样式如下: .d { width: auto; height: 200px; background-color: bisque; display: flex; align-items: center; } .d1, .d2, .d3 { height: 100px; width: 100px; } .d1 { background-color: pink; } .d2 { background-color: red; } .d3 { background-color: blue; }
flex属性是 flex-grow、flex-shrink、flex-basis 的缩写,默认值为0,1,auto。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |