弹性盒模型
2018-08-13 本文已影响0人
molly的红草帽
设置在父元素上的属性
一、给父元素设置display:flex; display:inline-flex;
1、所有子元素横向排列；
2、即便子元素是块元素，宽度也由内容撑起；
3、弹性盒模型的父元素不会出现高度塌陷；
4、一旦形成弹性盒模型，在子元素没有设置高度时，默认和父元素高度一致；
5、子元素永远不会溢出，即便写了宽度，也会被缩减，被压扁；
6、子元素为行内元素时，自动变为块元素的表现形式，可以设置宽高。
image.png
二、flex-direction：row | row-reverse | column | column-reverse
image.png
三、flex-wrap: nowrap | wrap | wrap-reverse
image.png
四、【主轴对齐】justify-content: flex-start | flex-end | center | space-between | sapce-around
区别:
flex-direction,改变了轴的方向，所以排列顺序发生了改变。
justify-content 只是对其方式的改变。
image.png
五、【侧轴对齐】align-item:flex-start | flex-end | center | baseline | stretch(默认值)
flex-start：以顶对齐，没有高度的由内容撑起。
center：以元素高度中间对齐。
stretch：以顶对齐，没有高度的默认等于父元素的高度。
baseline ：以文字基线对齐。
image.png
六、【设置各个行的对齐】align-content:flex-start | flex-end | center | spacing-around | spacing-between
align-content和justify-content有点像，区别是justify-content用于main-axis的对齐，而align-content用于多行在容器内的对齐方式。因此一定要多行（必须flex-wrap: wrap且容器不足以将所有元素放入一行内）才能出效果，如果容器内就一行是没有效果的。
image.png
设置在子元素上的属性
一、flex-grow:数值；将剩余空间进行分配。默认值为0，即不进行分配。
<style>
.box{
margin:50px auto;
width: 300px;
height: 100px;
background: #aaa;
display: flex;
}
.box p:nth-child(1){
background: #f00;
width: 100px;
flex-grow: 1;
}
.box p:nth-child(2){
background: #ff0;
width: 50px;
flex-grow: 2;
}
</style>
<body>
<div class="box">
<p>1</p>
<p>2</p>
</div>
</body>
父元素宽度300px，两个子元素共计150px，剩余150px，
第一个p标签flex-grow: 1; 分得150/（1+2）*1=50px 最后宽度100+50=150px；
第二个p标签flex-grow: 2; 分得150/（1+2）*2=100px 最后宽度50+100=150px；
二、flex-shrink:数值；将溢出空间进行分配。默认值为1。
<style>
.box{
margin:50px auto;
width: 200px;
height: 100px;
background: #aaa;
display: flex;
}
.box p:nth-child(1){
background: #f00;
width: 300px;
flex-shrink: 1;
}
.box p:nth-child(2){
background: #ff0;
width: 100px;
flex-shrink: 2;
}
</style>
<body>
<div class="box">
<p>1</p>
<p>2</p>
</div>
</body>
父元素宽度200px，两个子元素共计400px，溢出200px，
第一个p标签flex-shrink: 1; 裁去300*1/(300*1+1002)200
第二个p标签flex-shrink: 2; 裁去100*2/(300*1+1002)200
三、flex-basis
效果相当于width
四、【重点】 flex：1
flex:1;
flex：1 1 0;(依次为flex-grow, flex-shrink, flex-basis)
含义：当有多余空间时全部分配给此元素，当有溢出时，从这个元素上缩减，宽度为0（之前如果写了宽度则失效）
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0;padding:0;}
html,body{
height: 100%;
}
body{
display:flex;
flex-direction: column;
}
header{
height: 100px;
background: #f0f;
}
footer{
height: 100px;
background: #0ff;
}
main{
background: #0f0;
flex:1;
display: flex;
}
.main_left{
background: #ff0;
width: 100px;
}
.main_center{
background: #f00;
flex:1;
}
.main_right{
background: #0f0;
width: 100px;
}
</style>
</head>
<body>
<header></header>
<main>
<div class="main_left"></div>
<div class="main_center"></div>
<div class="main_right"></div>
</main>
<footer></footer>
</body>
</html>
五、order:数值;值越大，越靠后
image.png
六、align-self: auto | flex-start | flex-end | center | baseline | stretch
设置元素自身在侧轴上的对齐方式。
自转骰子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.stage{
margin:50px auto;
width: 800px;
height: 300px;
background: #ccc;
display: flex;
position: relative;
perspective: 1000px;
}
.con{
width: 65px;
height: 65px;
position: absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
transform-style: preserve-3d;
animation: rr 2s infinite linear;
}
.box{
padding:5px;
box-sizing: border-box;
width: 70px;
height: 70px;
background: #e6e6e6;
border-left:4px solid #d7d7d7;
border-bottom:4px solid #bbb;
border-radius:5px;
display:flex;
position: absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
span{
display:block;
width: 18px;
height: 18px;
border-radius: 50%;
background: #333;
}
.box:nth-child(1){justify-content: center; align-items:center;}
.box{justify-content: space-between;}
.box:nth-child(2) span:nth-child(1){align-items: flex-start;}
.box:nth-child(2) span:nth-child(2){align-self: flex-end;}
.box:nth-child(3) span:nth-child(1){align-items: flex-start;}
.box:nth-child(3) span:nth-child(2){align-self: center;}
.box:nth-child(3) span:nth-child(3){align-self: flex-end;}
.box:nth-child(4) p{display: flex; flex-direction: column; justify-content: space-between}
.box:nth-child(5) p{display: flex; flex-direction: column; justify-content: space-between}
.box:nth-child(5) p:nth-child(2){justify-content: center;}
.box:nth-child(6) p{display: flex; flex-direction: column; justify-content: space-between}
.box:nth-child(1){transform: translateZ(35px)}
.box:nth-child(2){transform: translateZ(-35px)}
.box:nth-child(3){transform: rotateY(90deg) translateZ(35px)}
.box:nth-child(4){transform: rotateY(-90deg) translateZ(35px)}
.box:nth-child(5){transform: rotateX(90deg) translateZ(35px)}
.box:nth-child(6){transform: rotateX(-90deg) translateZ(35px)}
@keyframes rr {
from{transform:rotateX(0) rotateY(0)}
to{transform:rotateX(360deg) rotateY(360deg)}
}
</style>
</head>
<body>
<div class="stage">
<div class="con">
<div class="box">
<span></span>
</div>
<div class="box">
<span></span>
<span></span>
</div>
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
<div class="box">
<p>
<span></span>
<span></span>
</p>
<p>
<span></span>
<span></span>
</p>
</div>
<div class="box">
<p>
<span></span>
<span></span>
</p>
<p><span></span></p>
<p>
<span></span>
<span></span>
</p>
</div>
<div class="box">
<p>
<span></span>
<span></span>
<span></span>
</p>
<p>
<span></span>
<span></span>
<span></span>
</p>
</div>
</div>
</div>
</body>
</html>
七、注意事项
弹性盒布局尽量不要使元素脱离文档流，否则整个布局就会混乱。尽量不适用以下属性：
float:left | right;
clear:both;
position:absolute;
