Flexbox(弹性盒模型)
- Flexbox 是 CSS Flexible Box Layout Module 的常用名称,这是一种用于在单个维度(行或列)中显示项目的布局模型。
- Flexbox 的关键特性是 flex 布局中的项目可以增大和缩小。可以将空间(Space)分配到项目本身、项目之间或项目周围。
个人理解:一个容器里面的东西,沿着一个方向排列摆放,摆放满了就缩小(宽),所以你可以各种排列摆放(往那边排列,那个方向就是主轴,侧轴始终与主轴垂直)
侵删-图片出自:https://www.runoob.com/w3cnote/flex-grammar.html
一、变成flex容器
父元素添加 display:flex;
二、Flex容器属性
1、作用在父元素上
改变主轴方向(!!)
flex-direction: row(默认水平从左到右) | row-reverse (从右到左)| column (垂直从上到下)| column-reverse(从下到上);
溢出换行
flex-wrap: nowrap(不换行)| wrap(换行) | wrap-reverse(反向换行);
flex-direction flex-wrap的简写
flex-flow: colunm nowrap;
主轴方向对齐方式
- space-between :两端对齐,项目之间的间隔都相等
- space-around :每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
justify-conent: flex-start(左对齐) |flex-end(右对齐)|center(居中)|space-between (两端对齐,项目之间的间隔都相等)|space-around;
交叉轴(侧轴)单行对齐方式
- baseline:项目的第一行文字的基线对齐。
align-items:flex-start |flex-end|center|baseline |strecth(默认值 自动拉伸);
交叉轴(侧轴)多行对齐方式
align-content:flex-start | flex-end|center | baseline | strecth(默认值 自动拉伸);
2、作用在子元素上
改变子项目的顺序
order:0;(数值越小,排列越靠前,默认为0,可以是负值)
容器剩余空间 :flow-grow、flex-shirnk(压缩) 、flex-basic(项目长度)
flex:1;
子项目(自身)交叉轴对齐方式(!!)
align-self:flex-start | flex-end | center | baseline |strecth(默认值 自动拉伸);
定义项目的放大比例,如果存在剩余空间,也不放大
flow-rgrow:0(默认);
项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
flex-shirnk:1(压缩)| 0(不压缩)
在分配多余空间之前,项目占据的主轴空间
flex-basic:auto(默认);
案例:
用flex实现双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/* html body 有盒子也要给高100% */
html,
body{
height: 100%;
}
.box{
height: 100%;
/*变成弹性容器*/
display: flex;
background-color: aqua;
/* 从上到下排列 */
flex-direction: column;
}
.head,.footer{
width: 100%;
height: 50px;
background-color: red;
}
.main{
/*把头部和底部挤开 */
flex: 1;
width: 100%;
background-color: black;
/* 弹性盒主轴默认从左到右 */
display: flex;
}
/* 左右被center挤走 */
.left,
.right{
width: 200px;
background-color: aqua;
}
/* 左右分开定义也可以 */
/* .right {
width: 100px;
background-color: rgb(31, 204, 135);
} */
.main .center{
/*剩余空间给center*/
flex: 1;
background-color: chocolate;
}
</style>
</head>
<body>
<!-- 上中下,左中右 -->
<!-- 改变窗口,左右宽固定200px不会改变,其他大小会变 -->
<div class="box">
<div class="head"></div>
<div class="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
找青蛙练习:http://flexboxfroggy.com/
注:弹性布局更多用于移动端,因为兼容性问题在pc端用的比较少,但是在pc端用flex布局是真的好用嘿嘿。
!!!注意主轴方向,属性作用在父元素还是子元素。
本人小白,如果那里有错误请及时指出,大家互相学习,加油。