电话
13363039260
弹性盒子布局flex是什么
2024-01-18 10:28 小编
在之前的文章中给大家介绍过cssGrid网格布局，本节继续给大家介绍css中的flex弹性布局。
flex弹性布局是css3中的一个有效的布局方式。
引入弹性盒布局模型（flexbox）的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。
或者说当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。
那什么是flex容器？
采用Flex布局的元素，称为Flex容器（container），简称”容器”。
推荐flex布局视频教程：《2018最新5个flex弹性布局视频教程》
flex弹性布局简单的代码示例： <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>flex布局</title> </head> <style> .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; } </style> <bodystyle="display:flex;flex-direction:row"> <divclass="box1"></div> <divclass="box2"></div> <divclass="box3"></div> <divclass="box4"></div> <divclass="box3"></div> <divclass="box1"></div> </body> </html>
效果如下图： 5bb6fd26d0b0fe87a0701de4f2f5cbe.png 我们可以设置使用display:flex;属性，让盒子具有弹性布局的属性。
flex-direction属性规定灵活项目的方向。 而项目就是容器成员，称为Flex项目（item），简称”项目”。
flex-direction可以有不同的属性值： row：默认值。灵活的项目将水平显示，如本例中项目从右到左水平展示。
row-reverse：与row相同，但是以相反的顺序。
column：灵活的项目将垂直显示。
column-reverse：与column相同，但是以相反的顺序。
initial：设置该属性为它的默认值。
inherit：从父元素继承该属性。
注意：如果元素不是弹性盒对象的元素，则flex-direction属性不起作用。
Tag： 什么猜你喜欢
联络方式：
13363039260
微信二维码 