CSS 15分钟快速掌握flex布局

学习最好的方法就是把你知道的告诉别人

flex布局在网页布局应用广泛。优点：响应式、使用简单、布局灵活，废话不多说，马上开始搞定它。

/************ 初始代码 *************/
<!-- html -->
<div class='container'>
  <div class='box1'></div>
  <div class='box2'></div>
  <div class='box3'></div>
</div>
<!-- css -->
.container {
  display:flex;
}
.box1 {
  width:100px;
  height:100px;
  background-color:red;
}
.box2 {
  width:100px;
  height:100px;
  background-color:yellow;
}
.box3 {
  width:100px;
  height:100px;
  background-color:green;
}

要点1：display:flex

给元素添加了display:flex，那么该元素就会变成flex容器，这是上面代码效果图：

要点2：flex-direction

flex-direction设置父容器的排列方向，那么子元素就会以row（水平方向）或column（垂直方向）排列。

flex-direction属性：

  • row（默认值）子元素按水平方向排列
  • column 子元素按垂直方向排列
  • row-reverse （子元素按row的相反顺序排列并靠右）
  • column-reverse (子元素按column相反顺序排列并靠底)
.container {
  display:flex;
  flex-direction:column;
}

上面代码给父容器设置了flex-direction:column属性，那么子元素就会被以列的方式排列。

其他属性自己分别试试哦

要点3：justify-content对齐元素

justify-content 使子元素沿主轴排列，当flex-direction:row时，父容器的主轴就是水平方向的，当flex-direction:column时，父容器的主轴就是垂直方向的。

justify-content属性值：

  • center 让子元素在父容器中沿主轴方向居中对齐,当方向为行时，水平居中，当方向为列时，垂直居中
  • flex-start 让子元素在父容器中沿主轴方向靠头放置
  • flex-end 让子元素在父容器中沿主轴方向靠尾放置
  • space-between 让头子元素和尾子元素在父容器中沿主轴靠最两端放置，中间各子元素间距均分
  • space-around 跟space-between相似，头尾子元素跟容器的边界有一定间距，中间各子元素间距均分

这些概念是不是很抽象？没关系看代码和效果你就马上能够理解了。

主轴方向为水平方向：

  1. center 让子元素在父容器中沿主轴方向居中对齐,当方向为行时，水平居中，当方向为列时，垂直居中
/* 子元素居中 */
.container {
  height:500px;
  display:flex;
  flex-direction:row;
  justify-content:center;
  background-color:gray;
}
justify-content:center
  1. flex-start 让子元素在父容器中沿主轴方向靠头放置
/* 子元素靠头 */
.container {
  height:500px;
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  background-color:gray;
}
justify-content:flex-start
  1. flex-end 让子元素在父容器中沿主轴方向靠尾放置
/* 子元素靠尾 */
.container {
  height:500px;
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  background-color:gray;
}
justify-content:flex-end
  1. space-between 让头子元素和尾子元素在父容器中沿主轴靠最两端放置，中间各子元素间距均分
/* 首尾子元素靠边 ，中间均匀分布*/
.container {
  height:500px;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  background-color:gray;
}
justify-content:space-between
  1. space-around 跟space-between相似，头尾子元素跟容器的边界有一定间距，中间各子元素间距均分
/* 首尾子元素不靠边 ，中间均匀分布*/
.container {
  height:500px;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  background-color:gray;
}
justify-content:space-around

主轴方向为垂直方向：

.container {
  height:500px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background-color:gray;
}
justify-content:center
.container {
  height:500px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background-color:gray;
}
justify-content:flex-start
.container {
  height:500px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background-color:gray;
}
justify-content:flex-end
.container {
  height:500px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background-color:gray;
}
justify-content:space-between
.container {
  height:500px;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  background-color:gray;
}
justify-content:space-around

要点4：align-items

与主轴垂直的叫交叉轴，align-items表示子元素沿交叉轴排列，row的交叉轴是垂直方向的，column的交叉轴是水平方向的。

align-items的属性：

  • center 子元素在交叉轴上居中排列，当方向为行时，元素垂直居中，当方向为列时，元素水平居中
  • flex-start 从父容器头部（最前端）开始放置
  • flex-end 从父容器尾部（最底部）开始放置
  • stretch 沿交叉轴方向拉伸项目，填满flex容器（父容器）
  • baseline 各子元素沿文字基线对齐

下面请仔细看各个属性的不同之处吧。

当flex-direction:row时(交叉轴为垂直方向)

  1. center :子元素在交叉轴上居中排列，当方向为行时，元素垂直居中，当方向为列时，元素水平居中
  .container {
  height:500px;
  display:flex;
  flex-direction:row;
  align-items: center;
  background-color:gray;
}
  1. flex-start：从父容器头部（最前端）开始放置
.container {
  height:500px;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  background-color:gray;
}
align-items:flex-start
  1. flex-end：从父容器尾部（最底端）开始放置
.container {
  height:500px;
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  background-color:gray;
}
  1. stretch：沿交叉轴方向拉伸项目，填满flex容器（父容器）
.container {
  height:500px;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  background-color:gray;
}
/*  */
.box1 {
  width:100px;
  background-color:red;
}
.box2 {
  width:100px;
  background-color:yellow;
}
.box3 {
  width:100px;
  background-color:green;
}
  1. baseline 各子元素沿文字基线对齐
.container {
  height:500px;
  display:flex;
  flex-direction:row;
  align-items:baseline;
  background-color:gray;
  text-align:center;
}
.box1 {
  width:100px;
  height:100px;
  font-size:30px;
  background-color:red;
}
.box2 {
  width:100px;
  height:100px;
  font-size:20px;
  background-color:yellow;
}
.box3 {
  width:100px;
  height:100px;
  background-color:green;
}

tips:如何利用justify-content（主轴） 和align-items（交叉轴），让子元素水平和垂直居中。

请看代码吧：

.container {
  height:500px;
  display:flex;
  justify-content:center; /*** 水平居中 ***/
  align-items:center;     /*** 垂直居中 ***/
  background-color:gray;
}
soeasy对吧！！！

要点5：flex-wrap

默认flex容器会把自动调整子元素的大小，如果是方向为row的话把它们塞在一行（水平线）里面
使用flex-wrap 包裹一行或一列，可以使多出来的子元素移到新的行或新的列。(只在水平方向有效果)

属性值：

  • nowrap 默认值
  • wrap 多余的移动新的行中
  • wrap-reverse 跟wrap的方向颠倒
  1. nowrap 默认值（不换号）
.container {
  height:500px;
  display:flex;
  flex-wrap:nowrap;
  background-color:gray;
}
.box1 {
  width:50%;
  height:50%;
  background-color:red;
}
.box2 {
  width:50%;
  height:50%;
  background-color:yellow;
}
.box3 {
  width:50%;
  height:50%;
  background-color:green;
}
  1. wrap 多余的移动到新的行中
.container {
  height:500px;
  display:flex;
  flex-wrap:wrap;
  background-color:gray;
}
  1. wrap-reverse 跟wrap的方向颠倒
.container {
  height:500px;
  display:flex;
  flex-wrap:wrap-reverse;
  background-color:gray;
}

要点6：flex-shrink

  • flex-shrink 见其名，知其意，就知道它是用来收缩元素的，当容器的大下，小于元素的大小的时候，该元素就会被压缩放小，比如，当容器的宽度小于元素的宽度时，元素就会被自动压缩。
  • flex-shrink它 接受的是number 类型的值。
  • number的值越大，该元素相比其他元素的被压缩的更大，反之，压缩更小，比如，A元素的flex-shrink:1，B元素的flex-shrink:2 ,那么B跟A相比就被压缩2倍。
.container {
  height:500px;
  display:flex;
  background-color:gray;
}
.box1 {
  width:100%;
  height:50%;
  background-color:red;
  flex-shrink:1;
}
.box2 {
  width:100%;
  height:50%;
  background-color:yellow;
  flex-shrink:2;
}

要点7：flex-grow

flex-grow：与flex-shrink相反，它用来扩展元素。flex-shrink为容器较小时，对元素进行相应调整，flex-grow为当容器较大时，对元素进行相应调整

比如 A元素的flex-grow:1,B元素的flex-grow:2时，那么B比A大2倍。

.container {
  height:500px;
  display:flex;
  background-color:gray;
}
.box1 {
  height:50%;
  background-color:red;
  flex-grow:1;
}
.box2 {
  height:50%;
  background-color:yellow;
  flex-grow:2;
}

要点8：flex-basic

flex-basic 用来设置当元素使用了flex-shrink或flex-grow前的初始大小。

flex-basic 接受的值px、em、%、rem 等，auto的话，大小依赖于自身的内容

.container {
  height:500px;
  display:flex;
  background-color:gray;
}
.box1 {
  height:50%;
  background-color:red;
  flex-basis:100px;
  flex-grow:1;
}
.box2 {
  height:50%;
  background-color:yellow;
  flex-basis:200px;
  flex-grow:5;
}

要点9：flex 属性简写

flex:1 2 30px; ：表示把该元素设置为flex-grow: 1;、 flex-shrink: 2;和flex-basis: 30px;

box1 为flex:3 3 100px; 和box2 为flex-grow:1 1 100px;
表示当容器的大于200px 时，box1 会被填充倍率为box2 的3 倍，当容器的小于200px 时，它的压缩倍率为box2 的3 倍。200px 为两个元素的flex-basis的值之和。

.container {
  height:500px;
  display:flex;
  background-color:gray;
}
.box1 {
  height:50%;
  background-color:red;
  flex:3 3 100px;
}
.box2 {
  height:50%;
  background-color:yellow;
  flex-grow:1 1 100px;
}
大于200px时

要点10： order 给元素设置排列的顺序

html里的元素默认是从上往下排列，使用order可以更改它们的放置的顺序，数值越小排在前面，接受负数。

.container {
  height:500px;
  display:flex;
  background-color:gray;
}
.box1 {
  width:100px;
  height:50%;
  background-color:red;
  order:1;
}
.box2 {
  width:100px;
  height:50%;
  background-color:yellow;
  order:-1;
}
黄色盒子被放置在红色盒子前

担心大家不能理解主轴和交叉轴，特附上了两张图方便理解。


当你理解了主轴和交叉轴，你就能很快能分清楚当容器为行或列的方向时，能迅速对元素设置你想要的效果了，没能马上理解也没关系，应用多了，再回来回顾复习，相信很快就能掌握。

flex布局到这里就结束了！！！，有木有很简单，你学会了吗？

最后补一条，看到的永远是别人的，做了才是自己的。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • H5移动端知识点总结
    H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,635评论 0赞 26
  • H5移动端知识点总结
    移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,521评论 0赞 6
  • CSS3伸缩布局盒模型Flex布局
    一、Flex 布局是什么？ CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局（Flexibl...
    侠客有情剑无情QAQ阅读 5,810评论 7赞 94
  • FlexBox布局全解
    前言 FlexBox是css3的一种新的布局方式，天生为解决布局问题而存在的它，比起传统的布局方式，我们使用Fle...
    zevei阅读 1,439评论 23赞 3
  • 失恋
    我喷了新买的香水，穿上了漂亮的裙子，搭配了合适的鞋子。就这样我也以为我做好了准备。 在车里面，他说：“你做我女朋友...
    田柿子阅读 218评论 1赞 0