常用的布局方式之 Flex 布局

Mertens 发布于2019-08-30 11:09 / 937人阅读

摘要：常用的布局方式之布局一布局介绍人们已经慢慢放弃了低版本浏览器，所以布局是现在首选的布局方式。使用了属性的标签，我们称之为容器，它的所有子元素自动成为容器成员，我们称之为项目。属性用来控制项目在侧轴的对齐方式。是和的简写形式。

常用的布局方式之 Flex 布局 一、 Flex布局介绍

人们已经慢慢放弃了低版本浏览器，所以 flex 布局是现在首选的布局方式。 flex 布局又称之为 弹性布局 ，任何一个标签都可以使用 flex 布局，

行内元素也可以使用 flex 布局，当时标签使用了 flex 布局以后，那么子元素的 float 、clear 等属性都将失效。

.box{
  display: flex;
}

使用了 display: flex 属性的标签，我们称之为容器，它的所有子元素自动成为容器成员，我们称之为项目。

容器默认有两个轴，主轴(默认为水平)和侧轴(默认为侧轴)，项目默认沿主轴排列。

二、容器的属性

容器常用的属性有六个。

flex-direction          // 控制主轴方向
justify-content         // 设置主轴方向对齐方式
align-items             // 控制侧轴方向对齐方式
align-content           // 当侧轴内容多行时，设置侧轴对齐方式
flex-wrap               // 控制项目是否允许换行
flex-flow               // 是flex-direction 和 flex-wrap 的简写

如果没有特殊说明，以下代码演示模板一律如下。


  1
  2
  3

2.1 flex-direction

flex-direction 决定主轴的方向，也就是项目的排列方向。

.box{
  flex-direction: row;
}

.box{
  flex-direction: row-reverse;
}

.box{
  flex-direction: column;
}

.box{
  flex-direction: column-reverse;
}

2.2 justify-content

justify-content 用来控制项目在主轴的对齐方式。

.box{
  justify-content: flex-start;
}

.box{
  justify-content: flex-end;
}

.box{
  justify-content: center;
}

.box{
  justify-content: space-around;
}

.box{
  justify-content: space-between;
}

.box{
  justify-content: space-evenly;
}

2.3 flex-wrap

容器的 flex-wrap 属性用来控制项目是否允许换行。

.box{
  flex-wrap: wrap;
}

.box{
  flex-wrap: wrap-reverse;
}

2.4 align-items

align-items属性用来控制项目在侧轴的对齐方式。

.box{
  align-items: flex-start;
}

.box{
  align-items: flex-end;
}

.box{
  align-items: center;
}

2.5 align-content

当侧轴有多行时，可以使用 align-content 来设置侧轴的对齐方式。

.box{
  align-items: flex-end;
}

.box{
  align-items: center;
}

.box{
  align-items: sapce-between;
}

.box{
  align-items: sapce-around;
}

2.6 flex-flow

flex-flow 是flex-direction和flex-wrap的简写形式。

.box{
  flex-flow: row nowrap;
}

.box{
  flex-flow: row wrap;
}

.box{
  flex-flow: column wrap;
}

.box{
  flex-flow: column nowrap;
}

三、项目的属性

项目的常用属性有三个。

order          // 项目的排列顺序
align-self     // 项目在侧轴的对齐方式
flex           // flex-grow, flex-shrink 和 flex-basis的简写

3.1 order

order 属性是控制项目的排列顺序，默认值是 0，数值越小排列越靠前，可以有负数。

3.2 align-self

align-self 是控制当前项目的侧轴的对齐方式，可以覆盖 align-items 属性。


  1
  2
  3

3.3 flex

项目使用的属性 flex 其实是 flex-grow(放大), flex-shrink(缩小) 和 flex-basis的简写，默认值是 0 1 auto。
我们通常设置的 flex：1，其实等价于 flex-grow: 1，也就是占有剩余空间的宽度。


  1
  2
  3

有时候，我们也会设置 flex: 33.333%，容器整个宽度就是100%，每个项目占33.333%，所以就是一行展示三个。

四、利用 flex 制骰子布局 4.1 一个点

4.2 两个点

4.3 三个点

4.4 四个点

4.5 五个点

4.6 六个点

本文参考了阮一峰大神的 http://www.ruanyifeng.com/blo... 。

云服务器 GPU云服务器 flex布局 android常用布局 android布局方式 html的布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114808.html

等高布局常用几种方式

摘要：等高布局的方式指在同一个父容器中子元素高度相等的布局从等高布局实现方式来说又分为两类伪等高子元素高度差依然存在只是视觉上给人感觉就是等高真等高子元素高度相等先来看看伪等高实现方式通过负和实现真等高实现方式伪等高之负和主要利用负来实现具体负等高布局的方式指在同一个父容器中,子元素高度相等的布局. 从等高布局实现方式来说,又分为两类伪等高子元素高度差依然存在,只是视觉上给人感觉就是...

Allen 2019-08-30 11:02 评论0 收藏0
等高布局常用几种方式

摘要：等高布局的方式指在同一个父容器中子元素高度相等的布局从等高布局实现方式来说又分为两类伪等高子元素高度差依然存在只是视觉上给人感觉就是等高真等高子元素高度相等先来看看伪等高实现方式通过负和实现真等高实现方式伪等高之负和主要利用负来实现具体负等高布局的方式指在同一个父容器中,子元素高度相等的布局. 从等高布局实现方式来说,又分为两类伪等高子元素高度差依然存在,只是视觉上给人感觉就是...

ymyang 2019-08-23 17:54 评论0 收藏0
快应用采坑与flex布局讲解

摘要：下面介绍有关的一些常用基本属性是定义主轴的方向，常用的有，。就直接讲一个稍微难一点的例子如果需要实现上面的情况，那么代码如下更多的就需要自己去探索，这里就不一一讲解了。快应用之flex布局在我们常用的布局中有display + position + float进行布局，但是这些布局或多或少都有些麻烦（虽然我最喜欢用position,哈哈啥都能干)。但是由于快应用只能够使用flex布...

chnmagnus 2019-08-22 18:27 评论0 收藏0
CSS布局十八般武艺都在这里了

摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。本文首发于知乎专栏：前端指南 CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...

includecmath 2019-08-29 12:17 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0