flex弹性盒子
触发弹性盒子
只需要设置display:flex就可以触发弹性盒子。其里面的内容就遵循弹性盒子的规则。
写在父级上面的属性
flex-direction
设置主轴方向，默认为row即是水平方向。
flex-direction：row | row-reverse | column | column-reverse
结构如下
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
.wrapper{
/*触发flex弹性盒子*/
display:flex;
flex-direction:column;
width: 600px;
height: 600px;
border: 1px solid black;
}
.content{
width: 100px;
height: 200px;
border: 1px solid blue;
}
flex-wrap
设置盒子里面的盒子是否换行，默认不换行，也就是在一行压缩。
flex-wrap：nowrap | wrap | wrap-reverse
.wrapper{
width: 600px;
height: 600px;
display: flex;
border: 1px solid black;
}
.content{
width: 100px;
height: 200px;
border: 1px solid blue;
}
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
</div>
设置flex-wrap:wrap;后
flex-flow
flex-flow：<’ flex-direction ‘> || <’ flex-wrap '>
justify-content
基于主轴的对齐方式。默认主轴是水平的哈。默认值为flex-start。
justify-content：flex-start | flex-end | center | space-between | space-around
- flex-end 和默认值flex-start相反
.wrapper{
width: 600px;
height: 600px;
border: 1px solid black;
display: flex;
justify-content: flex-end;
}
.content{
width: 100px;
height: 200px;
border: 1px solid blue;
}
-
space-around
-
space-between
-
center
align-items
基于交叉轴的对齐方式，主轴是水平的，那么交叉轴就是竖直向下的。默认值为flex-start。
align-items：flex-start | flex-end | center | baseline | stretch
-
flex-end
-
baseline
justify-content和align-items的垂直水平居中
/* 可拖拽 */
resize: both;
overflow: hidden;
justify-content: center;
align-items: center;
.wrapper{
width: 600px;
height: 600px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.content{
width: 100px;
height: 200px;
border: 1px solid blue;
}
align-content
对应align-items，align-items是单行的，align-content是多行的
align-content：flex-start | flex-end | center | space-between | space-around | stretch
.wrapper{
width: 600px;
height: 600px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.content{
width: 100px;
height: 200px;
border: 1px solid blue;
}
flex子级上的属性
order
排列在前面还是后面，默认值是0；绝对定位子元素。
.wrapper{
width: 600px;
height: 600px;
border: 1px solid black;
display: flex;
}
.content{
width: 100px;
height: 200px;
border: 1px solid blue;
}
.content:first-of-type{
order: 2;
}
.content:nth-of-type(2){
order: 1;
}
align-self
子项的对齐方式，优先级：align-items < align-self < align-content
如果值为「auto」，则计算值为父元素的 <’ align-items '> 值，否则为指定值。
flex-grow
有剩余空间按照比例平分，默认值是0；
.wrapper {
width: 600px;
height: 600px;
border: 1px solid black;
display: flex;
}
.content {
width: 100px;
height: 200px;
border: 1px solid blue;
box-sizing: border-box;
}
.content:first-of-type {
flex-grow: 1;
}
.content:nth-of-type(2) {
flex-grow: 2;
}
1:2:0 300px
100px 200px 0px
200px 300px 100px
flex-basis
简单理解为宽度，width，默认值为width，若设置了flex-basic就以它为标准。
.wrapper {
width: 600px;
height: 600px;
border: 1px solid black;
display: flex;
}
.content {
width: 100px;
height: 200px;
border: 1px solid blue;
box-sizing: border-box;
}
.content:first-of-type {
flex-basis: 200px;
}
.content:nth-of-type(2) {
flex-basis: 50px;
}
flex-shrink
当不换行且父级装不下子级时，就会shrink（收缩）。默认值为1；
- 当子级的宽高一样时，和flex-grow一样按照比例收缩。
- 当子级的宽高不一样，那么是按照加权后的比例收缩。
- 当子级的宽高不一样，那么是按照加权后的比例收缩。
.wrapper {
width: 600px;
height: 600px;
border: 1px solid black;
display: flex;
}
.content {
width: 100px;
height: 200px;
}
.content:first-of-type {
flex-basis: 300px;
}
.content:nth-of-type(2) {
flex-basis: 400px;
}
当子级的宽高不一样，那么是按照加权后的比例收缩。
盒子1: 300px - 75px = 225px
/*
300px(真实内容区的宽content) * 1
---------------------------------- x 200px(多出来的) = 75px
300px * 1 + 400px * 1 + 100px * 1
*/
盒子2:400px - 100px = 300px
/*
400px（真实内容区的宽content） * 1
---------------------------------- x 200px(多出来的) = 100px
300px * 1 + 400px * 1 + 100px * 1
*/
flex-basis和width
在元素里面有内容时：
- 只写flex-basis或者flex-basis大于width，代表元素的最小宽度。
- width大于flex-basis，flex-basis =< realWidth =< width。
flex-shrink和flex-basis
元素内容区是英文，尽管设置了flex-shrink，元素还是会被英文撑开。解决方法是打破英文不换行：word-break:breal-word;
.wrapper {
width: 600px;
height: 600px;
border: 1px solid black;
display: flex;
}
.content {
height: 200px;
/* word-break: break-word; */
}
.content:first-of-type {
background: brown;
flex-basis: 200px;
flex-shrink: 5;
}
.content:nth-of-type(2) {
background: rgb(80, 70, 70);
flex-basis: 200px;
flex-shrink: 1;
}
.content:nth-of-type(3) {
background: rgb(80, 43, 139);
flex-basis: 400px;
flex-shrink: 1;
}
<div class="wrapper">
<div class="content">ssadsadasdasdasdasdasdasdasdasdasdastoken</div>
<div class="content"></div>
<div class="content"></div>
</div>
- 设置word-break：break-word；后
中间固定两边自适应
利用flex
.wrapper {
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
/* 可拖拽 */
resize: both;
overflow: hidden;
}
.content {
flex: 1 1 auto;
width: 100px;
height: 100px;
border: 1px solid black;
}
.content:nth-of-type(2) {
flex: 0 0 150px;
border: 1px solid black;
}
流式布局
.wrapper {
width: 300px;
height: 600px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
/* 可拖拽 */
/* resize: both;
overflow: hidden; */
}
.content{
width: 100px;
height: 100px;
box-sizing: border-box;
/* background: chartreuse; */
border: 1px solid black;
}
圣杯布局
.wrapper {
width: 300px;
height: 400px;
border: 1px solid black;
display: flex;
flex-direction: column;
/* 可拖拽 */
resize: both;
overflow: hidden;
}
.header,
.footer,
.left,
.right {
flex: 0 0 20%;
box-sizing: border-box;
border: 1px solid black;
}
.wrapper .contain {
flex: 1 1 auto;
display: flex;
}
.center{
flex: 1 1 auto;
}
<div class="wrapper">
<div class="header"></div>
<div class="contain">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
