本文主要介绍flex(灵活布局)教程常用布局的相关信息，有需要的朋友可以参考一下。

目录

一、什么是Flex布局？任何容器都可以被指定为Flex布局。内嵌元素也可以使用Flex布局。Webkit内核浏览器必须以-webkit为前缀。二。常见布局样式：垂直居中子元素左右分布，水平垂直居中水平垂直居中图标，父元素由上方文本和下方子元素平分，自适应高度子元素由父元素平分。两边对齐，中间自适应同宽间隔，三栏布局自动换行。2009年，W3C提出了一种新的方案——Flex layout，可以简单、完整、响应性强地实现各种页面布局。目前已经被所有浏览器支持，也就是说现在使用这个功能是安全的。

一、Flex 布局是什么？

Flexible Box是Flexiblebox的缩写，意为‘灵活布局’，用于为箱形模型提供最大的灵活性。

。方框{

显示器：flex

}

。方框{

显示：内嵌-伸缩；

}

。方框{

显示：-WebKit-flex；/*游猎*/

显示器：flex

}

请注意，子元素的float、clear和vertical-align属性在设置为Flex layout后将变得无效。

二、常用布局

风格

* {

边距：0；

填充：0；

}。具有弹性{

显示器：flex

}

/风格

钢性铸铁。父亲-一

宽度：100%；

高度：200px

背景色：# fffcef

对齐-项目：居中；/*垂直轴)方向。*/

justify-content:space-between；/*均匀排列各元素。第一个元素放在起点，最后一个元素放在终点，中间元素的中间间隔相等*/

justify-content:space-around；/*均匀排列每个元素，并在每个元素周围分配相同的空间*/

对齐-内容：空间-均匀；/*均匀排列每个元素，每个元素之间的间隔相等*/

}。fa-一个孩子1 {

高度：30px

宽度：30px

背景色：# a6acde

}。fa-一个孩子2 {

高度：40px

宽度：40px

背景色：# e4b 9 f 0；

}。fa-一个孩子3 {

高度：50px

宽度：50px

背景色：# f3b009

}。fa-一个孩子4 {

高度：60px

宽度：60px

背景色：# f 77 C4 f；

}

超文本标记语言

！-垂直居中的子元素分布在星形周围-

H3垂直居中的子元素分布在左右/h3

div class=父亲-一个有-弹性

div class=fa-one-child1/div

div class=fa-one-child2/div

div class=fa-one-child3/div

div class=fa-one-child4/div

/div

！-垂直居中的子元素分布在左右两端-

钢性铸铁。父亲-两个

宽度：100%；

高度：200px

对齐-项目：居中；/*垂直轴)方向。*/

justify-content:居中；/*水平轴对齐)方向*/

背景色：红色；

}。孩子{

宽度：50%；

高度：60px

背景色：玫瑰色；

}

超文本标记语言

！-水平、垂直和居中星形-

H3水平垂直中心/h3

div class=父亲-两个有弹性

div class=child/div

/div

！-水平、垂直和居中端-

钢性铸铁。父亲-三岁

高度：80px

背景色：# f 77 C4 f；

对齐-项目：居中；

justify-content:居中；

伸缩方向：列；

}

超文本标记语言

！-上方文本中的水平、垂直和居中图标在下方星形中-

H3水平和垂直居中图标上方文本下方/h3

div class=has-flex father-three

I class= fa fa-file-text-o aria-hidden= true /I

测试/p

/div

！-下端上部文本中的水平和垂直居中图标-

钢性铸铁。父亲-四{

背景色：# ffd5eb

}。fa-四个孩子{

flex:1；

文本对齐：居中；

背景色：# ffffff

边框：1px纯色；

}

超文本标记语言

！-子元素等分父元素，自适应等高星形-

H3子元素被均等地划分为父元素，并且高度/h3自适应地相等。

div class=has-flex father-four

fa-四胎优先/div

fa-四子第二/第四

第三个/第四个孩子

class= fa-four-child style= height:90px 4/div

/div

！-子元素被平均分成父元素，自适应轮廓结束-

钢性铸铁。父亲-五岁

高度：100px

背景色：# a6acde

justify-content:space-between；

flex-wrap:缠绕；

}。fa-五个孩子

宽度：21%；

背景色：# f 77 C4 f；

}

超文本标记语言

！-子元素平分父元素，两边中间对齐相同的宽度间隔，单词换行星形-

H3子元素将父元素一分为二，两边在中间以相同的宽度间隔对齐，并自动换行/h3

div class=has-flex father-five

fa-五子优先/div

fa-五子第二个/div

fa-五子第三/div

fa-五子 4/div

第五个/分区

六年级/五年级

fa-五子 7/div

fa-五子 8/div

/div

！-子元素平分父元素，两边中间对齐相同的宽度间隔，换行结束-

钢性铸铁。父亲-六{

高度：100px

}。独生子女。三个孩子

宽度：300px

背景色：# a6acde

}。两个孩子

flex:1；

背景色：# eeeeee

}

超文本标记语言

！-三列布局，两边宽度固定，中间为自适应星形-

H3三栏布局，两边固定宽度，中间自适应/h3

div class=has-flex father-six

fa-六胎一胎优先/div

fa-六胎二胎二胎/div

第三个/div

/div

！-三列布局，两边固定宽度，中间自适应结束-

这就是这篇关于flex的常用布局(flexible Layout)教程。有关Flex常见布局的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！