本文主要介绍flex(灵活布局)教程常用布局的相关信息，有需要的朋友可以参考一下。
目录
一、什么是Flex布局？任何容器都可以被指定为Flex布局。内嵌元素也可以使用Flex布局。Webkit内核浏览器必须以-webkit为前缀。二。常见布局样式：垂直居中子元素左右分布，水平垂直居中水平垂直居中图标，父元素由上方文本和下方子元素平分，自适应高度子元素由父元素平分。两边对齐，中间自适应同宽间隔，三栏布局自动换行。2009年，W3C提出了一种新的方案——Flex layout，可以简单、完整、响应性强地实现各种页面布局。目前已经被所有浏览器支持，也就是说现在使用这个功能是安全的。
一、Flex 布局是什么？
Flexible Box是Flexiblebox的缩写，意为‘灵活布局’，用于为箱形模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
。方框{
显示器：flex
}
行内元素也可以使用 Flex 布局。
。方框{
显示：内嵌-伸缩；
}
Webkit 内核的浏览器，必须加上-webkit前缀。
。方框{
显示：-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常见布局的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。