Flex弹性布局有什么作用,flex布局方式

Flex弹性布局有什么作用,flex布局方式,flex(弹性布局)教程之常用布局

本文主要介绍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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: