• CSS布局 | flex布局

    flex布局

    flex是CSS3中新增的布局手段，优势是适用于不同屏幕尺寸和设备，当布局涉及到不定宽度，分布对⻬的场景时，我们可以优先考虑弹性盒布局。

    任何一个容器都可以指定为Flex布局，容器设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

    • 弹性容器(flex容器)：要使用弹性盒，必须先将一个容器设置为弹性容器

      • display:flex设置为块级弹性容器
      • display:inline-flex设置为行内的弹性容器。

    • 弹性元素(flex项目)：弹性容器的直接子元素

    • 主轴：弹性元素的排列方式为主轴，默认水平方向

      • justify开头表示与主轴相关

    • 侧轴：与主轴垂直方向为侧轴

      • align开头表示侧轴相关

    弹性容器上的样式

    • flex-direction 设置主轴的方向
    • flex-wrap 设置弹性元素是否在弹性容器中自动换行
      • nowrap：默认值，元素不会自动换行
      • wrap：元素沿着侧轴方向自动换行
      • wrap-reverse：元素沿着侧轴的反方向自动换行
    • flex-flow = flex-direction+flex-wrap，默认值为row nowrap
    • justify-content设置项目在主轴上的对齐方式
    • align-item 每行项目在侧轴上如何对齐，单行元素对齐时考虑使用
    • align-content 设置多行项目的对齐方式，会将多行元素看成一个整体。如果项目只有一行项目，该属性不起作用。

    由于align-content适用于多行项目，align-item适用于当行项目，所以align-content比其多space-around/space-between属性

    flex-direction

    属性值描述
    row默认值，主轴为水平方向，起点在左端，从左向右
    row-reverse主轴为水平方向，起点在右端，从右向左
    column主轴为垂直方向，起点在上端，从上向下
    column-reverse主轴为垂直方法，起点在下端，从下忘上

    在这里插入图片描述

    justify-content

    属性值描述
    flex-start（默认)从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个紧挨。
    flex-end从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个紧挨。
    center 居中每行弹性元素紧挨在一起，居中显示。
    每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
    space-between 两端对齐每行上均匀分配弹性元素，相邻元素间距离相同。
    每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
    space-around空白部分围绕在项目的两边，所以每个项目两侧的间隔相等。
    每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
    space-evenly所有的空白部分平均分配

    flex-start
    在这里插入图片描述

    space-around
    在这里插入图片描述

    space-between
    在这里插入图片描述
    space-evenly
    在这里插入图片描述

    align-item/align-content

    这两个元素属性值的取值和含义都一样。
    align-item如果有多行项目，其效果作用在每一行项目中
    align-content将多行项目看成一个整体设置其样式

    align-item的取值 单行元素考虑使用

    属性值描述
    streth拉伸默认值，子元素不设置高度(高度为auto时)自动拉升到弹性容器的长度
    baseline以元素的第一行文字的基线对齐
    center 居中共同属性值中讲解
    flex-start 起点对齐共同属性值中讲解
    flex-end 终点对齐共同属性值中讲解

    align-content的取值 多行元素使用

    属性值描述
    space-around所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。在这里插入图片描述
    space-between所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。在这里插入图片描述
    center 居中共同属性值中讲解
    flex-start 起点对齐共同属性值中讲解
    flex-end 终点对齐共同属性值中讲解
    stretch拉伸拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。
    共同属性值

    center
    在这里插入图片描述

    flex-start/flex-end同理
    在这里插入图片描述

    弹性元素上的样式

    • flex-grow：弹性元素的增长系数。默认为0，即如果存在剩余空间，也不放大。数值越大，增长越大。

    • flex-shrink：弹性元素的缩减系数
      默认为1，即如果空间不足，该弹性元素将缩小。**缩减宽度按照子项目宽度*缩放比例系数来分配。**数值越大，压缩越大。

    • flex-basis：元素在主轴上的基础长度
      默认为auto 表示参考元素自身的高度或者宽度。

      • 当 flex-basis 值为 0 % 时，项目尺寸会被认为是0，因此无论项目width设置多少都没用。容器不足时会优先最小化内容尺寸。
      • 当 flex-basis 值为 auto 时，则根据项目width的设定值来设置大小。在容器不足时会最大化内容尺寸，显示本身的大小。

    • order:x 决定弹性盒子的排列顺序，数值越小，排列越靠前，默认为0。

    可以想象成弹簧，flex-basis表示弹簧原始状态，浏览器将根据原始状态计算弹性容器的剩余空间。flex-shrink表示弹簧的压缩状态，flex-grow表示弹簧的伸长状态。

    flex属性

    flex 是flex-grow + flex-shrink + flex-basis 的缩写，这里顺序不能变。

    单值语法等同于描述
    flex:initialflex:0 1 auto1.存在剩余空间，项目不放大。
    2.如果空间不足，项目将缩小。
    3.在容器不足时会最大化内容尺寸，显示本身的大小（显示width设置的大小）。
    flex:0flex:0 1 0%1.存在剩余空间，项目不放大。
    2.如果空间不足，项目将缩小。
    3.项目大小由内容撑开，width失效，容器不足时会优先最小化内容尺寸。
    flex:noneflex:0 0 auto1.存在剩余空间，项目不放大。
    2.如果空间不足，项目不缩小。
    3.在容器不足时会最大化内容尺寸，显示本身的大小（显示width设置的大小）。
    flex:1flex:1 1 0%1.存在剩余空间，项目放大。
    2.如果空间不足，项目缩小。
    3.项目大小由内容撑开，width失效，容器不足时会优先最小化内容尺寸。
    flex:autoflex:1 1 auto1.存在剩余空间，项目放大。
    2.如果空间不足，项目缩小。
    3.在容器不足时会最大化内容尺寸，显示本身的大小（显示width设置的大小）。
    flex 取值为一个长度或百分比nflex:1:1:npx/n% 百分比相对于父元素长度优先作用于 flex-basis属性
    flex 取值为一个非负数字xflex:x 1 0%作用于flex-grow属性
    flex 取值为非负数字x yflex:x y 0%依次作用与flex-grow、flex-shrink属性
    flex:1的含义(常见面试题)

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在这里插入图片描述

    div:first-child{  
     flex: 1 1 0%; 
}

    • 1
    • 2
    • 3

    在这里插入图片描述

    面试题

    左边固定右边自适应

    <style>
.box {
    height: 500px;
    display: flex;
}
.box .right {
    flex: 1; //flex:auto
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述

    三个等分布局

    .container{
        width: 300px;
        display: flex;
}
div{
        border: 1px solid red;
        flex: 1;
 }  


    
    "container">
        
    "left">我是左边的div
    
        
    "center">我是中间的div我是中间的div
    
        
    "right">我是右边的div我是右边的div我是右边的div
    
     
    
      

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    圣杯布局

    本质:三列布局，左右两边固定，中间自适应且优先加载(优先加载的意思放在前面)

    1.布局

    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    在这里插入图片描述
    2.中间区域flex:1实现自适应

    .box{
    display: flex;
}
.center{
    background-color: pink;
    flex:1;/*自适应*/
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    3.移动位置使得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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

  • 相关阅读:
    《代码随想录》刷题笔记——字符串篇【java实现】
    关于Flask_响应的介绍
    计算机毕业设计（附源码）python足球新闻发布管理系统
    【centos】【Redis】【systemd】Redis进程守护
    Java类的主动加载和被动加载
    JVM 内存溢出 java heap space
    攻防演习防御体系构建之第二篇之应对攻击的常用策略
    java 开发ide插件
    代码随想录算法训练营第五十七天| 392.判断子序列、115.不同的子序列
    全志V853芯片在Tina下E907启动方式的选择
  • 原文地址：https://blog.csdn.net/qq_41370833/article/details/133640933