flex布局 实现圣杯布局-左边固定右边自适应-等分布局-flex:1的含义
文章目录
- flex 弹性盒模型
-
- 弹性容器上的样式
- 弹性元素上的样式
- flex属性
-
- flex:1的含义
- flex实现: 常见的上下结构
- flex实现等分布局
- flex左边固定右边自适应
- flex实现圣杯布局
flex 弹性盒模型
flex是CSS3中新增的布局手段，它主要用来代替浮动来完成页面的布局。
- 弹性容器：要使用弹性盒，必须先将一个容器设置为弹性容器
- display:flex设置为块级弹性容器
- display:inline-flex设置为行内的弹性容器。
- 弹性元素：弹性容器的直接子元素
主轴：弹性元素的排列方式为主轴
侧轴：与主轴垂直方向为侧轴
弹性容器上的样式
flex-direction指定容器中弹性元素的排列方式，设置主轴方向flex-wrap设置弹性元素是否在弹性容器中自动换行flex-flow是flex-wrap和flex-direction的简写属性，没有顺序justify-content如何分配主轴上的空白空间，主轴上的元素如何排列align-item元素在侧轴上如何对齐，每行元素在侧轴上如何对齐，单行元素对齐时考虑使用flex-wrap设置弹性元素是否在弹性容器中自动换行align-content侧轴空白空间的分布，把所有行元素看成一个整体，元素和空白之间如何对齐，多行元素一起对齐时考虑使用
justify开头表示与主轴相关
align开头表示侧轴相关
flex-direction指定容器中弹性元素的排列方式，设置主轴方向
row 默认值，弹性元素在容器中水平排列 从左向右
row-reverse 默认值，弹性元素在容器中水平排列 从右向左
column 弹性元素纵向排列 自上向下
column-reverse 弹性元素纵向排列 自下向上
flex-wrap 设置弹性元素是否在弹性容器中自动换行
nowrap:默认值，元素不会自动换行
wrap:元素沿着侧轴方向自动换行
wrap-reverse:元素沿着侧轴的反方向自动换行
justify-content 如何分配主轴上的空白空间，主轴上的元素如何排列
flex-start:元素沿着主轴的起边排列
flex-end:元素沿着主轴的终边排列
center：元素居中排列
space-around：空白分布在元素的两侧
space-evenly: 空白分布在元素的单侧
space-between：空白分布在两个元素间
align-content侧轴空白空间的分布，元素和空白之间如何对齐
center:元素在中间
flex-start:元素在侧轴起边
flex-end:元素在侧轴终边对齐
space-between：空白分布在两行元素只间
space-around：空白分布在元素的两侧
align-item 元素在侧轴上如何对齐，每行元素在侧轴上如何对齐
stretch 默认值，将一行的所有元素长度设置为相同的值，不同行长度可能不一样
flex-start:元素不会拉伸，沿着侧轴起边对齐
flex-end:元素不会拉伸，沿着侧轴终边对齐
flex-center:居中对齐
弹性元素上的样式
align-self用来覆盖当前弹性元素上的align-items
flex-grow：弹性元素的增长系数
默认为0，即如果存在剩余空间，也不放大
flex-shrink：弹性元素的缩减系数
默认为1，即如果空间不足，该弹性元素将缩小
综合缩减系数和元素大小来计算
flex-basis：元素在主轴上的基础长度
默认为auto 表示参考元素自身的高度或者宽度
可以想象成弹簧，flex-basis表示弹簧原始状态，flex-shrink表示弹簧的压缩状态，flex-grow表示弹簧的伸长状态
order:x 决定弹性盒子的排列顺序
flex属性
flex 是flex-grow + flex-shrink + flex-basis 的缩写，这里顺序不能变。
| 单值语法 | 等同于 |
|---|---|
| flex:initial | flex:0 1 auto |
| flex:0 | flex:0 1 0% |
| flex:none | flex:0 0 auto |
| flex:1 | flex:1 1 0% |
| flex:auto | flex:1 1 auto |
| flex 取值为一个长度或百分比n | flex:1:1:npx/n% 百分比相对于父元素 |
| flex 取值为一个非负数字x | flex:x 1 0% |
| flex 取值为非负数字x y | flex:x y 0% |
flex:1的含义
flex 是flex-grow + flex-shrink + flex-basis 的缩写，这里顺序不能变。
flex-grow 定义弹性元素的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink定义了弹性元素的缩小比例，默认为1，即如果空间不足，该弹性元素将缩小
flex-basis元素在主轴上的基础长度,默认auto
flex:auto 在容器不足时会最大化内容尺寸，显示本身的大小
flex:1 等同于flex:1 1 0% 表示可以增长，可以收缩，但在容器不足时会优先最小化内容尺寸
<style>
.container{
width: 300px;
display: flex;
}
div{
border: 1px solid red;
}
div:first-child{
flex: 1 1 auto;
}
style>
<div class="container">
<div >我是一个divdiv>
<div >我是一个很多字divdiv>
<div >我是一个更多字而且第三个divdiv>
div>
div:first-child{
flex: 1 1 0%;
}
flex实现: 常见的上下结构
修改主轴为y轴,把侧轴设置为居中对齐
.out{
display:flex;
flex-direction:column;
align-item:center; /*单行元素*/
}
flex实现等分布局
实现了三个不同内容的 div 平分空间
.container{
width: 300px;
display: flex;
}
div{
border: 1px solid red;
flex: 1;
}
flex左边固定右边自适应
<style>
.box {
height: 500px;
display: flex;
}
.box .right {
flex: 1;
border: 1px solid #000000;
}
.box .left {
border: 1px solid #000000;
flex-basis: 100px;
}
</style>
<body>
<div class="box">
<div class="left">左边固定效果</div>
<div class="right">右边自适应效果</div>
</div>
</body>
flex实现圣杯布局
- 先准备好布局
<style>
/* 设置颜色为了方便看见效果 */
.header,.footer{
background-color: blanchedalmond;
width: 100%;
}
.center{
background-color: pink;
}
.left{
background-color: red;
width: 100px;
}
.right{
background-color: blue;
width: 100px;
}
style>
<body>
<div class="header">headerdiv>
<div class="box">
<div class="center">主区域 div>
<div class="left">左区域div>
<div class="right">右区域div>
div>
<div class="footer">footerdiv>
body>
2. 中间区域flex:1实现自适应
.box{
display: flex;
}
.center{
background-color: pink;
flex:1;/*自适应*/
}
- 移动位置使得center到中间
.center{
background-color: pink;
flex:1;/*自适应*/
order:2;/*移动到中间*/
}
.left{
background-color: red;
width: 100px;
order:1;
}
.right{
background-color: blue;
width: 100px;
order:3;
}
/*写法2*/
.left{
background-color: red;
width: 100px;
order:-1; /*order默认为0,从小到大排序，1在前，以此类推 */
}
.right{
background-color: blue;
width: 100px;
}
.box{
display: flex;
}
