CSS布局 | flex布局

news2024/12/26 13:20:31

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 >我是一个div</div>
    <div >我是一个很多字div</div>
    <div >我是一个更多字而且第三个div</div>
</div>

在这里插入图片描述

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

在这里插入图片描述

面试题

左边固定右边自适应

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

在这里插入图片描述

三个等分布局

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

<body>
    <div class="container">
        <div class="left">我是左边的div</div>
        <div class="center">我是中间的div我是中间的div</div>
        <div class="right">我是右边的div我是右边的div我是右边的div</div>
     </div>
</body>

在这里插入图片描述

圣杯布局

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

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">header</div>
    <div class="box">
        <div class="center">主区域 </div>
        <div class="left">左区域</div>
        <div class="right">右区域</div>
    </div>
    <div class="footer">footer</div>

</body>

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

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

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

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1066639.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

电驱2035目标及新材料研究应用进展-2023

电驱2035目标及新材料研究应用进展-2023

今天同大家一起了解DOE电驱2035目标&#xff08;成本、功率密度、电压、峰值功率&#xff09;&#xff0c;及当前研发项目中关于电驱电机的新材料研究进展与应用。 2030-2035电驱系统目标 峰值功率和功率密度按每5年50%的速度提升&#xff0c;电压平台800V&#xff0c;增加峰值…
阅读更多...
数据被加密？.locked1勒索病毒的简单解决方法

数据被加密？.locked1勒索病毒的简单解决方法

引言&#xff1a; 在数字化的今天&#xff0c;数据宛如生命的一部分&#xff0c;而 .locked1 勒索病毒这种威胁正在如影随形地威胁着我们的数字宝库。本文将为您生动地介绍 .locked1 勒索病毒&#xff0c;以及如何摆脱它的束缚&#xff0c;解锁被其加密的数据&#xff0c;同时提…
阅读更多...
Unity Golang项目教程-创建项目

Unity Golang项目教程-创建项目

安装Unity Unity的安装比较简单。这里我不做详细介绍&#xff0c;提供一些安装教程链接&#xff0c;如果还有困难下面我提供联系方式可以私信我。 安装教程参考 创建工程如下图所示&#xff1a; 等待项目创建完成即可。 如有问题可以Q联系我&#xff0c; 873149745
阅读更多...
CCF中国开源大会专访 ｜ 刘旭东：着眼“开源联合”，实现“聚力共赢”

CCF中国开源大会专访 ｜ 刘旭东：着眼“开源联合”，实现“聚力共赢”

受访嘉宾 | 刘旭东 记者 | 朱珂欣 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 2023 CCF 中国开源大会&#xff08; CCF ChinaOSC &#xff09;拟于 2023 年 10 月 21 日至 22 日在湖南省长沙市北辰国际会议中心召开。 作为第二届 CCF 中国开源大会&a…
阅读更多...
计算CPK及规范限合格率，并绘制概率密度曲线

计算CPK及规范限合格率，并绘制概率密度曲线

CPK&#xff08;过程能力指数&#xff09;是一个用于衡量一个过程的稳定性和一致性的统计指标&#xff0c;特别用于制造业和质量管理中。它衡量了一个过程的变异性与规范界限的关系&#xff0c;帮助确定过程是否能够产生合格的产品或服务。 正态分布假设&#xff1a;CPK的计算…
阅读更多...
Kfka监控工具--Kafka-eagle安装

Kfka监控工具--Kafka-eagle安装

1、开启Kafka JMX端口 JMX 是一个为应用程序植入管理功能的框架 在启动Kafka脚本之前&#xff0c;添加&#xff1a; export JMX_PORT9988 nohup bin/kafka-server-start.sh comfig/server.properties 2、安装jdk配置好JAVA_HOME 3、将kafka_eagle 上传并解压 tar -zxvf …
阅读更多...
想做扫码看图效果，你需要学会这一招

想做扫码看图效果，你需要学会这一招

现在扫描二维码来查看图片是常见的一种方式&#xff0c;比如资料图片、个人照片、pdf图片、表情包等等都可以通过扫码的方式来展现。而且生成图片二维码的方法也非常的简单&#xff0c;只需要使用二维码在线生成器&#xff0c;就可以使用浏览器来快速完成制作&#xff0c;对于还…
阅读更多...
VS2022+qt5.15.2+cmake3.23.2配置VTK9.1.0版本

VS2022+qt5.15.2+cmake3.23.2配置VTK9.1.0版本

VS2022qt5.15.2cmake3.23.2VTK9.1.0 尝试了好多次&#xff0c;终于成了~ 软件安装 先把需要的软件都安装好&#xff01; VS2022安装教程: https://blog.csdn.net/qq_44005305/article/details/132295064 qt5.15.2安装教程&#xff1a;https://blog.csdn.net/Qi_1337/article…
阅读更多...
python—如何提取word中指定内容

python—如何提取word中指定内容

假设有一个Word&#xff0c;该Word中存在 “联系人” 关键字&#xff0c;如何将该Word中的联系人所对应的内容提取出来呢&#xff1f; 该Word内容如下所示&#xff1a; 要在给定的Word文档中提取出与"联系人"关键字对应的内容&#xff0c;可以使用Python的py…
阅读更多...
qt开发从入门到实战2

qt开发从入门到实战2

以下是本人学习笔记 原视频&#xff1a;最新QT从入门到实战完整版|传智教育 qt开发从入门到实战1 练习示例 设计一个按钮&#xff0c;点击时弹出新窗口&#xff0c;再次点击时新窗口关闭 // exerciseQWidget* second_window new QWidget();QPushButton* btn3 new QPushBu…
阅读更多...
兽药经营小程序微信商城的作用是什么

兽药经营小程序微信商城的作用是什么

无论家宠还是畜牧养殖&#xff0c;生病杀虫总是不可少的&#xff0c;尤其对铲屎官们来说&#xff0c;宠物的健康状况很重要&#xff0c;以此花费百元千元也并不觉心疼&#xff0c;兽药的需求度也是非常高&#xff0c;那么对相关从业商家来说&#xff0c;遇到的难题有哪些&#…
阅读更多...
淘宝大数据揭秘：购物狂欢节背后的秘密

淘宝大数据揭秘：购物狂欢节背后的秘密

淘宝详情接口是淘宝开放平台提供的一种API接口&#xff0c;主要用于获取淘宝商品详情信息。通过该接口&#xff0c;开发者可以在自己的网站或应用程序中快速获取淘宝商品的详细信息&#xff0c;包括价格、图片、商品描述等。 要使用淘宝详情接口&#xff0c;首先需要在淘宝开放…
阅读更多...
[NISACTF 2022]babyserialize - 反序列化+waf绕过【*】

[NISACTF 2022]babyserialize - 反序列化+waf绕过【*】

[NISACTF 2022]babyserialize 一、解题过程二、思考总结&#xff08;一&#xff09;、关于题目的小细节&#xff08;二&#xff09;、关于弱类型比较技巧 一、解题过程 题目代码&#xff1a; <?php include "waf.php"; class NISA{public $fun"show_me_fl…
阅读更多...
java Spring Boot整合jwt实现token生成

java Spring Boot整合jwt实现token生成

先在 pom.xml 文件中注入依赖 <!-- JWT --> <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt-api</artifactId><version>0.11.2</version> </dependency> <dependency><groupId>io.jsonw…
阅读更多...
解决方案：AI赋能工业生产3.0，从工业“制造”到“智造”

解决方案：AI赋能工业生产3.0，从工业“制造”到“智造”

视频监控技术是一种既成熟又广泛应用于工业制造领域的先进技术。它可以通过安装各种摄像头和传感器来监测整个生产流程&#xff0c;包括原材料的采购、加工、装配和物流等环节&#xff0c;从而实现对生产过程的实时监控和管理&#xff0c;以及对异常事件的及时预警和响应。 在…
阅读更多...
CSS高手必会秘籍《混合模式》

CSS高手必会秘籍《混合模式》

&#x1fab4; 背景 前几天我写了两篇关于css的文章&#xff0c;热度都还不错。 # 原创动画《优弧&#xff0c;你小子&#xff01;&#x1f621;》 # &#x1f973;&#x1f973;&#x1f973; 倾情奉献&#xff0c;纯css&#xff08;无图&#xff0c;无JS&#xff09;原创中…
阅读更多...
6.canvas绘制基本图形——椭圆

6.canvas绘制基本图形——椭圆

ellipse ellipse是一个用来绘制椭圆的api&#xff0c;它拥有8个参数 参数一&#xff1a;椭圆圆心的 x 轴坐标。 参数二&#xff1a;椭圆圆心的 y 轴坐标。 参数三&#xff1a;椭圆长轴的半径。 参数四&#xff1a;椭圆短轴的半径。 参数五&#xff1a;椭圆的顺时针旋转角度&am…
阅读更多...
6.绘制三角形

6.绘制三角形

愿你出走半生,归来仍是少年 上一个案例通过Buffer实现了点集合的传入并一次性绘制多个点。当前案例通过Buffer传入多个点&#xff0c;并一次性通过点绘制出一个三角形。 1.知识点 1.1.gl_PointSize 只有在绘制点时才有效&#xff0c;该案例中的顶点着色器中已移除此代码。 1…
阅读更多...
学生必备的笔记工具比较适合用哪个

学生必备的笔记工具比较适合用哪个

学习与笔记紧密相连&#xff0c;它们是知识获取和积累的有效途径。通过记录笔记&#xff0c;我们不仅可以更好地理解和记忆学习内容&#xff0c;还可以随时翻阅&#xff0c;巩固知识点。然而&#xff0c;传统的纸质笔记在面对大量学习内容时显得力不从心&#xff0c;而电子笔记…
阅读更多...
查找文件夹下不同的图片名字

查找文件夹下不同的图片名字

描述&#xff1a;文件夹1和文件夹2下有3张图片&#xff0c;其中文件夹1下有柯南.jpg、柯南1.jpg、柯南2.jpg&#xff0c;文件夹2下有柯南.jpg、柯南3.jpg、柯南4.jpg&#xff0c;找出文件夹1中不同于文件夹2的名字&#xff0c;以及文件夹2中不同于文件夹1的名字。文件解构如下图…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023