资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Flex布局入门

Flex布局入门

Magicer / 2590人阅读

摘要：简介首先先聊一聊布局是什么布局表面上类似于块布局，但是它缺少许多可以在块布局中使用的更复杂的文本或文档中心属性，如浮动和列，与此同时，它也获得了一些简单而强大的布局工具，它可以自动调整，计算元素在容器空间的大小重要概念容器父元素显示地设置项

简介

首先先聊一聊Flex布局是什么？Flex布局表面上类似于块布局，但是它缺少许多可以在块布局中使用的更复杂的文本或文档中心属性，如浮动和列，与此同时，它也获得了一些简单而强大的布局工具，它可以自动调整，计算元素在容器空间的大小

重要概念

Flex容器：父元素显示地设置display:flex.
Flex项目：Flex容器内的子项目

Flex容器中默认存在一根水平的主轴（main axis）和竖直的交叉轴（cross axis），主轴开始的位置叫main start，结束位置叫main end，交叉轴开始的位置cross start结束的位置叫cross end，Flex容器中的项目将会沿着主轴或者交叉轴排布。比较重要的几个概念介绍完，下面将会结合代码介绍对应的属性

Flex容器属性

容器属性主要有一下六个：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction

此属性决定了主轴的排布方向，可以取四个值：

row(默认值)：主轴沿水平方向从左至右排列

row-reverse：主轴沿水平方向从右至左排列

column：主轴沿垂直方向从上至下排列

column-reverse：主轴沿垂直方向从下至上排列


    
1

    
2

    
3


.container{
  display: flex;
  flex-direction: row;
}
.item{
  flex: 1;
  margin: 10px;
  background-color: #ccc;
}

当flex-direction为row(默认值)时：

当flex-direction为column(默认值)时：

flex-wrap

此属性决定了是否换行,可取三个值

nowrap(默认值)：不换行

wrap：换行，第一行在上方

wrap-reverse：换行，第一行在下方

.container{
  display: flex;
  flex-wrap: nowrap;
  width: 400px;
}
.item{
  width: 200px;
  margin: 10px;
  background-color: #ccc;
}

当flex-wrap属性值取默认的nowrap时，容器下面元素不会换行，且如果容器项目的宽度和超过容器，则容易项目宽度将会按照比例缩小

当flex-wrap属性值取默认的wrap时，容器下面元素超过容器宽度就会换行显示

flex-flow

flex-flow属性是flex-direction和flex-wrap属性的简写，默认是 row nowrap

justify-content

此属性定义了主轴上的项目对齐方式，可取五个值：

flex-start(默认值)：左对齐

flex-end：右对齐

center：水平居中

space-between：两端对齐

space-around：项目两侧间距相等

.container{
  display: flex;
  justify-content: flex-start;
}

当justify-content为flex-start时，主轴上的项目将靠左对齐

当justify-content为flex-end时，主轴上的项目将靠右对齐

当justify-content为flex-end时，主轴上的项目将居中对齐

当justify-content为space-between时，主轴上的项目将两端对齐，且项目之间的间距相等

当justify-content为space-around时，项目两侧间距相等，项目之间的间距是侧边间距两倍

align-items

align-items控制项目在竖直交叉轴上的对齐方式，可取五个值

flex-start：交叉轴起点对齐，即上对齐

flex-end：交叉轴终点对齐，即下对齐

center：交叉轴中间对齐，即竖直居中

baseline：沿基线对齐，基线与其交叉起始边距边缘之间最大距离的项目被放置在该行的交叉起始边缘上（即基线以距离交叉轴距离最远的项目下边界为准）如果该项在必需的轴没有基线，则从Flex项目的边框中合成一个基线。

stretch(默认值)：默认值，若项目没有设置高度时，项目高度会拉伸到预容器高度一致，存在高度设置，以设置属性为准

.container{
  display: flex;
  height: 400px;
  align-items: flex-start;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 0 10px;
  background-color: #ccc;
}

align-items取值为flex-start时，靠顶端对齐

align-items取值为flex-end时，靠底端对齐

align-items取值为flex-center时，竖直居中对齐

.container{
  display: flex;
  height: 400px;
  align-items: flex-start;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 0 10px;
  background-color: #ccc;
}
.item:nth-child(1) {
  height: 100px;
  line-height: 100px;
}

align-items取值为baseline时，基线对齐

align-content

此属性用于多行排列的Flex容器，对单行容器不起作用，排列效果和align-items一样，但是没有baseline属性，属性取值：

flex-start：交叉轴起点对齐，即上对齐

flex-end：交叉轴终点对齐，即下对齐

center：交叉轴中间对齐，即竖直居中

stretch(默认值)：项目高度与容器高度一样

space-between：两端对齐

space-around：项目两侧间距相等

 .container{
  display: flex;
  height: 800px;
  width: 400px;
  flex-wrap: wrap;
  align-content: flex-start;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
}

这是align-content取值为flex-start时，由于取值和align-item表现一致，因此不再举例其他属性

项目属性 order

此属性可以定义项目的排列顺序，数值越小的项目越靠前，默认值为0

.container{
  display: flex;
  height: 400px;
  align-content: flex-start;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
}
.item:nth-child(1) {
  order: 2;
}
.item:nth-child(2) {
  order: 1;
}
.item:nth-child(3) {
  order: -1;
}

flex-grow和flex-shrink

这两个属性体现Flex布局的灵活性，它们定义了容器中项目的放大和缩小，flex-grow的默认值为0，即默认情况即使有剩余空间也不会自动放大，flex-shrink默认值为1，即在空间不足的情况下，容器项目会自动缩小

.container{
  display: flex;
  width: 1000px;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
}

默认情况下容器宽度比项目宽度大时，flex-grow默认值为0时，项目不会自动拉伸

当将flex-grow的值设置为1时，项目将会自动拉伸占满剩余空间

.item:nth-child(1) {
 flex-grow: 2;
}

如图所示当将容器的第一个项目flex-grow设为2时，其他项目flex-grow为1时，容器的剩余空间会按照flex-grow的比例将剩余的空间分配给各个项目

.container{
  display: flex;
  width: 500px;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
}

当flex-shrink的值为默认1时，可以看到容器的项目宽度和比容器宽度要大时，会自动进行缩小，当手动设置flex-shrink为0时，将不会进行缩小，如下图

flex-basis

此属性设置项目占据主轴的空间，当不设置值时，默认为auto，即项目本来的大小，也可以手动设置占据主轴的空间大小

.container{
      display: flex;
      width: 500px;
      border: 1px solid #000;
    }
    .item{
      width: 100px;
      height: 200px;
      margin: 10px;
      background-color: #ccc;
    }
    .item:nth-child(1) {
      flex-basis: 150px;
    }

flex简写

flex属性是flex-grow、flex-shrink、flex-basis的简写形式，默认值是0 1 auto，该属性有两个快捷值，auto(1 1 auto)，none(0 0 auto)

align-self

此属性定义了单个项目的对齐方式，取值和表现和align-items基本一致，多了一个值auto即默认值，表示继承容器的align-items属性，取值auto | flex-start | flex-end | center | baseline | stretch

.container{
  display: flex;
  width: 500px;
  border: 1px solid #000;
}
.item{
  width: 100px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
}
.item:nth-child(1) {
  height: 100px;
  align-self: center;
}

此处就举了align-self: center时的例子，其余表现和align-items表现一致，只不过align-self作用在单个项目上

服务器托管 私有云 flex布局 布局入门 flex flex40

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

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

相关文章

  • Flexbox入门教程

    摘要：我们会在本文给出一个易于理解的入门介绍。项的顺序的属性另外一个的能力，是能够轻松改变元素的显示顺序。她想让成为页面的第一个元素，显示在之前。可接受的值有，或者一个数字后面紧跟着，，或其他长度单位。 近几年，CSS领域出现了一些复杂的专用布局工具，用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。Flexbox，或者说是弹性盒子布局模块（Flexible Box Layout...

    刘永祥 评论0 收藏0

  • flex布局入门总结——语法篇

    摘要：默认值如果项目未设置高度或设为，将占满整个容器的高度。与交叉轴两端对齐，轴线之间的间隔平均分布。该属性有两个快捷值和。默认值为，表示继承父元素的属性，如果没有父元素，则等同于。该属性可能取个值，除了，其他都与属性完全一致前几天看了阮一峰的Flex布局教程，讲的很不错，总结一下,有兴趣的可以去看原文http://www.ruanyifeng.com/blog/2015/07/flex-gram...

    cocopeak 评论0 收藏0

  • 给萌新的Flexbox简易入门教程

    摘要：我们会在本文给出一个易于理解的入门介绍。项的顺序的属性另外一个的能力，是能够轻松改变元素的显示顺序。她想让成为页面的第一个元素，显示在之前。可接受的值有，或者一个数字后面紧跟着，，或其他长度单位。 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://www.sitepoint.com/flexbox-css-flexible-...

    KavenFan 评论0 收藏0

  • React Native基础&入门教程：初步使用Flexbox布局

    摘要：图大小的内容在同样尺寸的屏幕中所占据的物理大小一致中字体大小使用另外一个单位，叫做，简称。其中二布局布局，也就是弹性盒模型布局。所以这里最外层的使用了布局的，，表示让它占据了垂直的整个空间。在上篇中，笔者分享了部分安装并调试React Native应用过程里的一点经验，如果还没有看过的同学请点击《React Native基础&入门教程：调试React Native应用的一小步》。 在本篇里，...

    番茄西红柿 评论0 收藏0

  • 给萌新的Flexbox简易入门教程

    摘要：年末促销葡萄城岁末福利火热放送中近几年，领域出现了一些复杂的专用布局工具，用以代替原有的诸如使用表格浮动和绝对定位之类的各种变通方案。重点推荐年末促销葡萄城岁末福利火热放送中灵活高效的前端开发工具包，可快速搭建企业应用程序 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 【年末促销】葡萄城 2018 岁末福利火热放送中 近几年，CSS领域出...

    王晗 评论0 收藏0

  • 给萌新的Flexbox简易入门教程

    摘要：年末促销葡萄城岁末福利火热放送中近几年，领域出现了一些复杂的专用布局工具，用以代替原有的诸如使用表格浮动和绝对定位之类的各种变通方案。重点推荐年末促销葡萄城岁末福利火热放送中灵活高效的前端开发工具包，可快速搭建企业应用程序 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 【年末促销】葡萄城 2018 岁末福利火热放送中 近几年，CSS领域出...

    LeexMuller 评论0 收藏0

发表评论

登陆后可评论

0条评论

Magicer

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<