弹性盒子布局flex是什么
导读: 在之前的文章中给大家介绍过cssGrid网格布局,本节继续给大家介绍css中的flex弹性布局。 flex弹性布局是css3中的一个有效的布局方式。 引入弹性盒布局模型(flexbox)的目的是提供一种更加有效的方式来对一个...
在之前的文章中给大家介绍过cssGrid网格布局,本节继续给大家介绍css中的flex弹性布局。
flex弹性布局是css3中的一个有效的布局方式。
引入弹性盒布局模型(flexbox)的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作。
或者说当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素可预测地运行。它不使用浮动,flex容器的边缘也不会与其内容的边缘折叠。
那什么是flex容器?
采用Flex布局的元素,称为Flex容器(container),简称"容器"。
推荐flex布局视频教程:《2018最新5个flex弹性布局视频教程》
flex弹性布局简单的代码示例:
flex布局
.box1{
background:#1F376D;
height:500px;
width:500px;
}
.box2{
background:#745A74;
height:500px;
width:500px;
}
.box3{
background:#26A3CF;
height:500px;
width:500px;
}
.box4{
background:#CCCC66;
height:500px;
width:500px;
}
效果如下图:
5bb6fd26d0b0fe87a0701de4f2f5cbe.png
我们可以设置使用display:flex;
属性,让盒子具有弹性布局的属性。
flex-direction属性规定灵活项目的方向。
而项目就是容器成员,称为Flex项目(item),简称"项目"。
flex-direction可以有不同的属性值:
row:默认值。灵活的项目将水平显示,如本例中项目从右到左水平展示。
row-reverse:与row相同,但是以相反的顺序。
column:灵活的项目将垂直显示。
column-reverse:与column相同,但是以相反的顺序。
initial:设置该属性为它的默认值。
inherit:从父元素继承该属性。
注意:如果元素不是弹性盒对象的元素,则flex-direction属性不起作用。
本篇文章就是关于flex弹性盒子布局的简单介绍,希望对感兴趣的朋友有一定的帮助!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 弹性盒子布局flex是什么
本文地址: https://pptw.com/jishu/664858.html