1.背景

　　传统的布局方案基于盒状模型,依赖display + position + float 的方式实现,灵活性较差,对于那些特殊的布局非常不方便.

　　2009年,W3C提出了一种新的方案--Flex布局.

2.什么是Flex布局?

　　Flex是Flexible Box的缩写,意为"弹性布局",用来为盒模型提供最大的灵活性,以便我们能够简便、完整、响应式的实现多种网页布局.

　　任何一个容器都可以指定为Flex布局,行内元素也可以设置为Flex布局

    <div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>

　　

 　.box {display: flex;    /*行内元素设置为 inline-flex*/}.box .item {width: 100px;height: 100px;background-color: red;margin-left: 10px;}

　　注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

3.基本概念

　　采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

　　容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

　　Flex项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

　　Flex属性分为两部分，一部分作用于容器称容器属性，另一部分作用于项目称为项目属性。下面我们就分别来介绍它们。

4.Flex容器的属性

4.1 flex-direction属性

flex-direction属性决定主轴的方向(即项目排列的方向)

基本语法:

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

说明:

(1)row表示从左向右排列

　(2)row-reverse表示从右向左排列

　　(3)column表示从上向下排列

　　(4)column-reverse表示从下向上排列

4.2 flex-warp属性

默认情况下,Flex项目都排在一条轴线上.我们可以通过对flix-warp的属性的设置,让Flex项目是否换行

基本语法:

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

说明:

(1)nowrap:所有项目单行排列

(2)warp:所有项目多行排列,按照从上到下的顺序

(3)warp-reverse:所有项目多行排列,按照从上到下的顺序

4.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，用来设置项目的排列方式。默认值为row nowrap

基本语法：

.box {flex-flow: <flex-direction> || <flex-wrap>;
}

例如我给容器设置 flex-flow: row wrap-reverse;就是主轴从左向右，从下到上多行排列

4.4 justify-content

　　justify-content属性定义了项目在主轴上的对齐方式及额外空间的分配方式。

基本语法：

.box {justify-content: flex-start | flex-end | center | space-between | space-around;
}

说明：

(1)flex-start： 左对齐

(2)flex-end：右对齐

(3)center：居中

(4)space-between：项目均匀分布，项目第一项在主轴起点，最后一项在主轴终点

(5)space-around:项目两侧的间隔相等，项目之间的距离是两侧距离的2倍

(6)space-evenly:项目均匀分布

4.5 align-items

　　align-items属性定义项目在交叉轴上的对齐方式。

基本语法：

.box {align-items: stretch | flex-start | flex-end | center | baseline;
}

说明：

（1）stretch:交叉轴方向拉伸显示

（2）flex-start:项目按交叉轴起点线对齐

（3）flex-end:项目按交叉轴终点线对齐

（4）center:交叉轴方向项目中间对齐

（5）baseline:交叉轴方向按第一行文字基线对齐

4.6 align-content

　　align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

基本语法：

.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

说明：

（1）flex-start:与交叉轴的起点对齐

（2）flex-end:与交叉轴的终点对齐

（3）center:与交叉轴的中点对齐

（4）space-between: 与交叉轴两端对齐，轴线之间平均分布

（5）space-around:每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

（6）stretch:轴线占满整个交叉轴。

5.Flex项目属性

5.1 order

默认情况下，Flex项目是按照在代码中出现的先后顺序排列的。然而order属性可以控制项目在容器中的先后顺序。

基本语法：

.item {order: <integer>;
}

假如有四个盒子按照1，2，3，4排列，我想让2号盒子排在第一位，那么就把2号盒子的order的值写成最小即可，order可以设置负值

5.2 flex-grow

 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

基本语法：

.item {flex-grow: <number>; /* default 0 */
}

　　 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间(如果有的话)

　　如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

5.3 flex-shrink

　　flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

基本语法：

.item {flex-shrink: <number>; /* default 1 */
}

　　如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

　　负值对该属性无效

5.4 flex-basis

　　flex-basis属性定义项目在分配额外空间之前的默认尺寸。属性值可以是长度（20%，10rem等）或者关键字auto。它的默认值为auto，即项目的本来大小。

基本语法:

.item {flex-basis: <length> | auto; /* 默认 auto */
}

说明:

(1) flex-basis:auto

(2)flex-basis:3em

(3) flex-basis:30%

5.5 flex

　　flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

基本语法:

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

5.6 align-self

　　align-self属性定义项目的对齐方式，他允许每个项目有不一样的对其方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 除了auto，其他都与align-items属性完全一致。

基本语法:

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

6.Flex实例

6.1 网格布局

　　(1) 最简单的网格布局，就是平均分布。在容器里面平均分配空间，需要设置项目的自动缩放。

html代码:

<div class="box"><span class="item">***</span><span class="item">***</span>
</div>

css代码:

.box {display: flex;width: 550px;
}
.box .item {flex: 1;background-color: red;margin-right: 10px;border-radius: 5px;font-size: 20px;text-align: center;
}

(2) 百分比布局

　　设置某个网格的宽度为固定百分比,其它网格平均分配剩余的空间

html代码

    <div class="box14"><span class="item14">1/2</span><span class="item14">1/4</span><span class="item14">auto</span><span class="item14">auto</span></div>

css代码

.box14 {display: flex;width: 550px;margin-bottom: 10px;
}
.box14 .item14 {flex: 1;background-color: red;margin-right: 10px;border-radius: 5px;font-size: 20px;text-align: center;
}
.box14 .item14:first-child {flex: 0 0 50%;
}
.box14 .item14:nth-child(2){flex: 0 0 25%;
}

6.2 圣杯布局

　　圣杯布局指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。　

　

html代码:

    <div class="box15"><header>header</header><div class="connent"><div class="main">main</div><div class="left">left</div><div class="right">right</div></div><footer>footer</footer></div>

　　*最外层盒子应该是body标签,为了演示画了一个600*600的盒子

css代码:

.box15 {width: 600px;height: 600px;font-size: 30px;color: #fff;text-align: center;display: flex;flex-direction: column;
}
.box15 header,.box15 footer {height: 50px;background-color: red;
}
.box15 .connent {display: flex;flex: 1;
}
.box15 .connent .main {flex: 0 0 400px;background-color: pink;
}
.box15 .connent .left, .box15 .connent .right{flex: 0 0 100px;background-color: #ccc;
}
.box15 .connent .left {order: -1;
}

6.3 筛子的布局

(1)

html代码:

    <div class="box16"><span class="item"></span></div>

css代码:

.box16 {width: 100px;height: 100px;background-color: #ccc;border-radius: 5px;display: flex;justify-content: center;align-items: center;
}
.box16 .item {width: 15px;height: 15px;background-color: #000;border-radius: 50%;
}

(2)

html代码:

<div class="box17"><span class="item"></span><span class="item"></span><span class="item"></span>
</div>

css代码:

.box17 {width: 100px;height: 100px;background-color: #ccc;border-radius: 5px;display: flex;
}
.box17 .item {width: 15px;height: 15px;background-color: #000;border-radius: 50%;
}
.box17 .item:nth-child(2) {align-self: center;
}
.box17 .item:nth-child(3) {align-self: flex-end;
}

6.4 九宫格效果


html代码:

    <div class="box18"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></div>

css代码

.box18 {width: 350px;display: flex;flex-wrap: wrap
}
.box18 .item {width: 100px;height: 100px;background-color: red;margin: 5px 5px;
}

6.5 条件搜索

　　像是一些后台OA可能用到很多条件查询并列在一起,如果布局的整齐些,可以用Flex布局

html代码:

<div class="box19"><div class="search"><span>条件一</span><select><option value="1">请选择</option><option value="1">111</option><option value="2">222</option><option value="3">333</option></select></div><div class="search"><span>条件二</span><select><option value="1">请选择</option><option value="1">111</option><option value="2">222</option><option value="3">333</option></select></div>..............</div>

css代码:

.box19 {display: flex;flex-wrap: wrap;
}
.box19 .search {width: 150px;display: flex;margin: 5px 20px 0 0;
}
.box19 .search span {font-size: 14px;color: #000;margin-right: 5px;
}
.box19 .search select {flex-grow: 1
}

以上所有的案例都放在了我的github中,克隆地址 

转载于:https://www.cnblogs.com/qisi007/p/9640287.html

弹性布局----Flex相关推荐

  1. CSS 的弹性布局(flex) ，是什么？

    一.弹性布局 是什么? 元素根据窗口大小变化而自动伸长或缩短,使得整个页面格式保持不变. 二.怎么使用? 1.使用方法 /* 1.父元素中增加 display 属性:*/ display: flex; ...

  2. 弹性布局(Flex布局)

    弹性布局(Flex布局) 文章目录 弹性布局(Flex布局) 绪论 Flex布局是什么? Flex布局的基本概念 Flex容器的属性 以下六个属性设置在Flex容器上 flex-direction属性 ...

  3. (二)弹性布局Flex

    弹性布局Flex 本周在逆战班学习了布局方面的知识,作为前端开发布局是最关键的,此文章用来写自己对弹性布局知识点的理解,和想法, 弹性布局分为两部分父元素和子元素,在父元素上设置弹性布局而控制子元素 ...

  4. Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow

    用Android原生实现流式布局[实现例如app的很多标签]需要自定义View继承自ViewGroup,然后代码量也不小. 相关自定义View实现流式布局,请参考这位老兄的博客: https://bl ...

  5. CSS3多列布局 columns 弹性布局 flex

    多列布局columns 多列布局可以控制页面内容的排版方式,可以将文本内容设计成像报纸一样的多列布局. 属性 示例 含义 column-count column-count: 3; 将元素内部分割成3 ...

  6. css布局之弹性布局flex

    1. 弹性布局作用 作用:弹性布局flex能按照我们的设置自动计算各子元素之间的间距并将之布局好,而不需要像定位那样手动计算布局. 2.弹性布局的定义和属性 弹性布局是定义在一个父容器中,加上disp ...

  7. 我的JavaScript回顾之路_08—0227—支付密码输入框/弹性布局flex

    1.支付密码输入框 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

  8. Bootstrap弹性布局Flex

    弹性布局Flex 一.Flex 1.弹性盒模型 2.子元素的排列方向 3.子元素的对齐方式 4.自对其 5.填满 6.伸缩 7.自动的间距 8.wrap包裹 9.order排序 10.多行对齐 一.F ...

  9. 弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content

    弹性布局(flex布局.伸缩布局) 一.什么是弹性布局 flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒模型提供最大的灵活性,任何一个容器都可以指定为fl ...

  10. flutter 弹性布局 flex

    弹性布局 flex flex可以沿着水平或者垂直方向排列子组件,row和coloumn都继承自flex,参数基本相同,唯一有一个关键参数是Expanded,该参数在row和column中也存在,该参数 ...

最新文章

  1. python编译器在哪下载-Python-IDLE的下载安装及使用
  2. 使用R画桑基图(流程图)
  3. Java微框架Spring Boot 运行原理深入解读
  4. VTK：导出PolyData场景用法实战
  5. linux week3
  6. Altera之VIP TPG学习笔记
  7. 8.12模拟：dp递推
  8. leetcode170. 两数之和 III - 数据结构设计
  9. ElementUI弹框组件 messageBox 如何换行 ？
  10. python定界符有哪些_Python 开发中有哪些高级技巧？
  11. yii beforeaction 如何赋值全局变量_前端如何进行用户权限管理
  12. android preferenceActivity的用法
  13. 【MYSQL笔记】分组计算多表查询
  14. idea创建svn分支
  15. 天涯怎么引流到qq？天涯社区如何靠发帖子引流？
  16. GNN IS A COUNTER REVISITING GNN FOR QUESTION ANSWERING
  17. 2015人生感悟哲理
  18. IPD解读--华为500强的研发第一名，除了钱还有IPD
  19. 终身学习C++__小胡亲测
  20. 微星电脑不能u盘引导linux,微星电脑设置从U盘启动的三种方式

热门文章

  1. 介绍一个轻量级iOS安全框架：SSKeyChain
  2. Oracle数据库入门——常用的数据字典
  3. multiselect多选下拉框
  4. 如何用distinct消除重复记录的同时又能选取多个字段值？
  5. Vue3的响应式原理解析
  6. 解决mac osx下pip安装ipython权限的问题
  7. Oracle查看锁表
  8. 互联网产品跨部门沟通的10个原则(转)
  9. 我国域名***日均58起 高安全DNS防御系统建设刻不容缓
  10. ubuntu上网慢的问题