详细的css3中的弹性布局介绍_通俗易懂
Posted 小牛儿学JAVA
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了详细的css3中的弹性布局介绍_通俗易懂相关的知识，希望对你有一定的参考价值。
小牛又是努力的一天哦！我会用心去写每一步！
弹性布局你学“废”了吗？
废话不多说，开干！！！
弹性盒子的概念
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex块 和inline-flex行，将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。
注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
弹性盒子的相关属性
我们可以设置使用属性，让盒display: flex; 子具有弹性布局的属性。
1.flex-direction元素
flex-direction 属性规定灵活项目的方向,分为行和列布局方式。
而项目就是容器成员，称为Flex项目（item），简称”项目”。
flex-direction 可以有不同的属性值：
row： 默认值。灵活的项目将水平显示，如本例中项目从右到左水平展示。
row-reverse： 与 row 相同，但是以相反的顺序。
加粗样式 灵活的项目将垂直显示。
column-reverse： 与 column 相同，但是以相反的顺序。
initial： 设置该属性为它的默认值。
inherit： 从父元素继承该属性。
注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。
| 值 | 描述 |
|---|---|
| row | 默认值。元素将水平显示，正如一个行一样。 |
| row-reverse | 与 row 相同，但是以相反的顺序。 |
| column | 元素将垂直显示，正如一个列一样。 |
| column | 与 column 相同，但是以相反的顺序。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>弹性布局</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
body{display: flex;flex-direction:row;}
div{background: red;border: 1px solid black;width: 50px;height: 40px;}
body div:first-child{background: blueviolet;}
body div:nth-child(2){background:yellow;}
body div:nth-child(3){background: green;}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
下列是效果图，默认是一行显示所有的子元素
可以将flex-direction:column,更改为列显示。
2.flex-warp
flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。防止元素的溢出，默认情况下是元素自适应。
| 值 | 描述 |
|---|---|
| nowrap | 默认值。规定元素不拆行或不拆列。 |
| warp | 规定元素在必要的时候拆行或拆列。 |
| warp-reverse | 规定元素在必要的时候拆行或拆列，但是以相反的顺序。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>弹性布局</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
body{display: flex;flex-direction:row-reverse;justify-content:flex-end;width: 180px;height: 90px;border: 1px solid black;}
div{background: red;border: 1px solid black;width: 50px;height: 40px;}
body div:first-child{background: blueviolet;}
body div:nth-child(2){background:yellow;}
body div:nth-child(3){background: green;}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
效果图：
body里宽设置为180px，盒子的宽为50px，显然以正常的大小body盒子是装不下四个小盒子的，所以默认情况下子元素自适应一行显示。
如果将flex-wrap：wrap；加入css布局中，效果便会是如下显示：会折行显示。
3.flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4.align-items
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
| 值 | 描述 |
|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 |
| center | 项目位于容器的中心。 |
| flex-start | 项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| baseline | 项目位于容器的基线上。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
footer{border: 1px solid black;width: 800px;height: 250px;display: flex; flex-flow:row wrap-reverse;align-items:center;}
footer div{width: 200px;height: 50px;margin:10px;border: 1px solid black;text-align: center;font-size: 20px;}
</style>
</head>
<body>
<footer>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</footer>
</body>
</html>
5.justify-content
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
| 值 | 描述 |
|---|---|
| space-between | 项目位于各行之间留有空白的容器内。 |
| center | 项目位于容器的中心。 |
| flex-start | 项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
footer{border: 1px solid black;width: 800px;height: 250px;display: flex; flex-flow:row wrap-reverse;align-items:center;justify-content:flex-end;}
footer div{width: 200px;height: 50px;margin:10px;border: 1px solid black;text-align: center;font-size: 20px;}
</style>
</head>
<body>
<footer>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</footer>
</body>
</html>
弹性盒子子元素
| 值 | 描述 |
|---|---|
| order | 设置弹性盒子的子元素排列顺序。 |
| flex-grow | 设置或检索弹性盒子元素的扩展比率。 |
| flex-shrink | 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。 |
| flex-basis | 用于设置或检索弹性盒伸缩基准值。 |
| flex | 设置弹性盒子的子元素如何分配空间。 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
1.order元素
<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>弹性布局</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
body{display: flex;flex-direction:row-reverse;justify-content:flex-end;width: 180px;height: 90px;border: 1px solid black;flex-wrap:wrap;}
div{background: red;border: 1px solid black;width: 50px;height: 40px;}
body div:first-child{background: blueviolet;order:1;}
body div:nth-child(2){background:yellow;order:22;}
body div:nth-child(3){background: green;order:-11;}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
2.flex-grow属性
<integer>：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
3.flex-shrink
<integer>：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。
4.flex-basis
<integer>：一个长度单位或者一个百分比，规定元素的初始长度。
auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。
5.flex
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
以上是关于详细的css3中的弹性布局介绍_通俗易懂的主要内容，如果未能解决你的问题，请参考以下文章