css弹性盒子——flex布局

已于 2024-09-05 10:39:28 修改
阅读量296 收藏 3
点赞数 8
分类专栏： HTML5+CSS3网页设计 文章标签： css 前端 html css3 html5 前端框架 sass
于 2024-09-05 10:31:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bengbeng2345/article/details/141919666
版权

目录

​编辑

一、flex容器的样式属性(父元素属性)

 display:flex  弹性盒子，实现水平排列,在父盒子设置，适用于单行/单列

justify-content

二、flex元素的样式属性(子元素属性)

1.flex-grow

 2.flex-shrink

3.flex-basis

4.flex组合属性 flex:flex-grow flex-shrink flex-basis；

5.order

6.align-self 单独控制某个元素

一、flex容器的样式属性(父元素属性)

 display:flex  弹性盒子，实现水平排列,在父盒子设置，适用于单行/单列

默认子盒子宽高度超过父盒子时，按父盒子宽高度均分，再多则会溢出

flex和上面的block，inline，inline-block并列， display只能设置一个属性，display和float不能出现在同一个盒子的属性里。

flex-direction: column;flex-wrap:wrap;  等于 flex-flow: row wrap;

使用F12可快速调试各属性的页面效果 

justify-content

justify-content:space-evenly; 

justify-content:space-between;

 justify-content: space-around;两侧的空间是中间元素间隔空间的一半 

stretch(默认值)

align-items:baseline;

二、flex元素的样式属性(子元素属性)

1.flex-grow

单个盒子范围0~1 延伸至剩余空间的0~1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-grow</title>
    <style>
        .box{
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
        }
        .box div{
            width: 100px;
            height: 100px;
            background-color: pink;
            flex-grow: 0.6;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
    </div>
</body>
</html>

多个子盒子设置超过1时，剩余空间分成n份

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-grow</title>
    <style>
        .box{
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
        }
        .box div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background-color: pink;
            flex-grow: 3;
        }
        .box div:nth-of-type(2){
            width: 200px;
            height: 100px;
            background-color: green;
            flex-grow: 2;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
    </div>
</body>
</html>

 2.flex-shrink

收缩超出部分的0~1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-grow</title>
    <style>
        .box{
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
        }
        .box div:nth-of-type(1){
            width: 600px;
            height: 100px;
            background-color: pink;
            flex-shrink: 0.5;
        }
        /* .box div:nth-of-type(2){
            width: 200px;
            height: 100px;
            background-color: green;
        } */
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <!-- <div>2</div> -->
    </div>
</body>
</html>

3.flex-basis

设置主轴初始尺寸，0%(不起作用)，n px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-grow</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: skyblue;
            display: flex;
        }
        .box div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background-color: pink;
            /* flex-shrink: 0.5; */
            flex-basis: 200px;
        }
        /* .box div:nth-of-type(2){
            width: 200px;
            height: 100px;
            background-color: green;
            flex-grow: 0.5;
        } */
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <!-- <div>2</div> -->
    </div>
</body>
</html>

4.flex组合属性 flex:flex-grow flex-shrink flex-basis；

flex:1;  表示1 1 0%

flex:0.5; 表示0.5 1 0%

5.order

顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-grow</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: skyblue;
            display: flex;
            /* flex-direction: column; */
        }
        .box div{
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
        }
        .box div:nth-of-type(1){
            order:1;
        }
        .box div:nth-of-type(1){
            order:-1;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

6.align-self 单独控制某个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-grow</title>
    <style>
        .box{
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
            /* flex-direction: column; */
        }
        /* .box div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background-color: pink;
            flex-shrink: 0.5;
            flex-basis: 200px;
            flex:1;
        } */
        /* .box div:nth-of-type(2){
            width: 200px;
            height: 100px;
            background-color: green;
            flex-grow: 0.5;
        } */
        .box div{
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
        }
        /* .box div:nth-of-type(1){
            order:1;
        } */
        .box div:nth-of-type(4){
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

鸣弦artha
关注
  • 8
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【CSS布局】—— flex（弹性）布局
qq_49002903的博客
08-28 3万+
CSS3新增了弹性盒子模型( Flexible Box或ElexBox)，是-种新的用于在HTML页面实现布局的方式。使得当 HTML页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。弹性盒子模型实现HTML页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。弹性盒子模型主要适用于HTML页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响HTML页面性能...
css3弹性盒子——flex布局的四大属性——理论篇
爱游戏爱学习的博客
04-11 871
引入弹性盒子的好处是让一个容器对子元素的排列、对齐、分配空白空间更加有效。
CSS弹性盒子布局——flex布局的基本概念
一只彩乌鸦
08-11 3001
《CSS弹性盒子布局——flex布局的基本概念》 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文章中探索。 我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。 flexbox 的两根轴线 当使
CSS基本布局——flex布局
weixin_52148548的博客
01-07 2556
文章目录flex基本概念flex布局两个重要概念存在形式flex布局模型：容器属性flex-directionjustify-contentalign-itemsflex-wrapalign-content项目属性orderalign-selfflex-growflex-shrinkflex-basis flex基本概念 flex布局 Flexible布局，即弹性盒子布局 两个重要概念 开启了flex布局的元素叫做flex container flex container里边的直接子元素叫做fl
css弹性盒子(Flex布局)
S_aitama的博客
02-23 1404
@ TOC Flex弹性盒模型 CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构...
CSS基础知识——Flex弹性盒模型
weixin_45177251的博客
11-11 1144
Flex弹性盒模型弹性盒子的概念弹性盒子如何开启弹性盒子模型flex-direction 弹性盒子的概念 弹性盒子：是由弹性容器和弹性元素所组成的，它是通过设置display属性值为flex或inline-flex将其定义为弹性容器，弹性容器内包含了一个或多个弹性子元素，弹性盒子只定义了子元素如何在弹性容器内布局，弹性子元素通常在弹性盒子内一行显示，默认情况下，每个容器只有一行。 弹性盒子 如何开启弹性盒子模型 给容器设置 display:flex 或 display:inline-flex flex-
CSS——Flex布局
weixin_48796690的博客
01-09 647
文章目录一、flex布局体验二、flex布局原理三、flex布局父元素常见属性1.flex-direction设置主轴的方向2.justify-content主轴上子元素排列方式3.flex-wrap设置子元素是否换行4.align-items侧轴上的子元素排列方式（单行）5.align-content侧轴子元素排列方式（多行）6.flex-flow复合属性四、flex布局子元素常见属性1.flex属性2.align-self属性3.order属性 一、flex布局体验 传统布局： （1）兼容性好 （2.
弹性盒子——flex
LiuHB_的博客
09-14 152
Flex布局 Flex布局是在css3中引入的，又称“弹性盒模型”。该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。 弹性盒子的使用都必须伴随着父级设置display:flex;使用 1. 伸缩性(flex) 意思是让伸缩项目的宽高自动填充伸缩容器额外的空间 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <st
CSS——弹性盒（flex）
Fan_web的博客
08-16 1629
本文主要跟大家分享了弹性盒的内容，同时扩充了CSS中的部分知识：像素、视口、移动端、完美视口、vw单位以及适配、响应式布局中的媒体查询等等。下一节将开始分享关于JavaScript的初级学习内容。
18、前端开发：CSS知识总结——弹性盒子（flex）
ydc222的博客
11-07 1249
弹性盒子 单行文本和多行文本
CSS——Flex弹性布局及flex-grow与flex-shrink的计算
GoodLuck_wu5的博客
07-31 509
一、Flex布局 flex布局就是将盒子变成弹性盒子， 任何一个盒子都可以变成弹性盒子display: flex 行内元素也可以使用 Flex 布局 display: inline-flex 注意： 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 二、容器的属性
移动端布局——Flex布局
m0_45659764的博客
04-02 2073
一、Flex布局 思考 多个盒子横向排列使用什么属性？ 浮动 设置盒子间的间距使用什么属性？ margin 需要注意什么问题？ 浮动的盒子脱标 Flex布局/弹性布局：(PC端对低版本浏览器不兼容/移动端可以随便用) 是一种浏览器提倡的布局模型 非常适合结构化的布局（左右、上下...） 布局网页更简单、灵活 避免浮动脱标的问题 一个网站：http://caniuse.com 查看一个技术兼容和不兼容的浏览器版本 1.1 Flex布局模型构成 作用 基于Fl...
从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界（JavaWeb、HTML、CSS）
最新发布
Hanbuhuic的博客
09-04 1295
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它定义了网页的结构和内容，但不包括样式和行为。HTML 由一系列的元素组成，这些元素可以被浏览器识别并渲染成可视化的网页。CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档的样式表语言。它能够控制网页的布局、颜色、字体以及其他视觉和版式特性。CSS 允许开发者将页面的内容（HTML）与页面的表现（CSS）分离，这样可以更灵活地进行设计和维护。
css画个熊猫
此博客内容主要是小可日常工作中的一些问题解决的记录整理而成
08-29 975
【html源码-一键复制查看效果】/* 不规则的圆形写法 *//* 半圆线条 */
CSS学习3
qq_54641174的博客
08-29 844
css样式表
CSS解析：盒模型
晓风残月淡的博客
09-01 1184
在网页上实现元素布局涉及很多技术。在复杂网站上，可能会用到浮动元素、绝对定位元素以及其他各种大小的元素，甚至也会使用较新的CSS特性，比如Flexbox或者网格布局。在此之前我们要打好基础，深刻理解浏览器是如何设置元素的大小和位置的。高级的布局话题基于文档流和盒模型等概念，这些是决定网页元素的大小和位置的基本规则。我们将构建一个两列布局的网页。你可能很熟悉这个布局，因为它是一个经典的CSS入门练习，但是在完成这种布局的过程中，有一些布局中经常被忽略的一些细节。
理解调试和组织 CSS——WEB开发系列26
一条晒干的咸鱼的博客
09-01 1793
CSS（层叠样式表）不仅是为网页提供样式的关键工具，也是调试和优化网页表现的重要部分。无论是调整网页布局，还是确保样式的一致性，掌握调试和组织 CSS 的技巧都是至关重要的。
CSS实现水滴效果图
N201871643的博客
08-26 1239
水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档呈现的样式语言。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值