你知道的和不知道的flex弹性盒子

最新推荐文章于 2023-07-17 11:38:44 发布
最新推荐文章于 2023-07-17 11:38:44 发布
阅读量214 收藏 2
点赞数
分类专栏： CSS3 文章标签： css css3 flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tscn1/article/details/114876828
版权

flex弹性盒子

触发弹性盒子

只需要设置display:flex就可以触发弹性盒子。其里面的内容就遵循弹性盒子的规则。

写在父级上面的属性

flex-direction

设置主轴方向，默认为row即是水平方向。

flex-direction：row | row-reverse | column | column-reverse

结构如下

<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
</div>

.wrapper{
	/*触发flex弹性盒子*/
	display:flex;
	flex-direction:column;
	width: 600px;
    height: 600px;
    border: 1px solid black;
}
.content{
    width: 100px;
    height: 200px;
    border: 1px solid blue;
}

在这里插入图片描述

flex-wrap

设置盒子里面的盒子是否换行，默认不换行，也就是在一行压缩。

flex-wrap：nowrap | wrap | wrap-reverse

.wrapper{
	width: 600px;
    height: 600px;
    display: flex;
    border: 1px solid black;
}
.content{
   width: 100px;
   height: 200px;
   border: 1px solid blue;
}

<div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
        <div class="content">6</div>
 </div>

在这里插入图片描述

设置flex-wrap:wrap;后

在这里插入图片描述

flex-flow

flex-flow：<’ flex-direction ‘> || <’ flex-wrap '>

justify-content

基于主轴的对齐方式。默认主轴是水平的哈。默认值为flex-start。

justify-content：flex-start | flex-end | center | space-between | space-around

  • flex-end 和默认值flex-start相反
.wrapper{
       width: 600px;
       height: 600px;
       border: 1px solid black;
       display: flex;
       justify-content: flex-end;
       
 	  }
 .content{
     width: 100px;
     height: 200px;
     border: 1px solid blue;
 }

在这里插入图片描述

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

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

  • center
    在这里插入图片描述

align-items

基于交叉轴的对齐方式，主轴是水平的，那么交叉轴就是竖直向下的。默认值为flex-start。

align-items：flex-start | flex-end | center | baseline | stretch

  • flex-end
    在这里插入图片描述

  • baseline
    在这里插入图片描述

justify-content和align-items的垂直水平居中

	 /* 可拖拽 */
            resize: both;
            overflow: hidden;

		justify-content: center;
        align-items: center;

.wrapper{
            width: 600px;
            height: 600px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
            
            
        }
        .content{
            width: 100px;
            height: 200px;
            border: 1px solid blue;
        }

在这里插入图片描述

align-content

对应align-items，align-items是单行的，align-content是多行的

align-content：flex-start | flex-end | center | space-between | space-around | stretch


.wrapper{
            width: 600px;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            
        }
        .content{
            width: 100px;
            height: 200px;
            border: 1px solid blue;
        }

在这里插入图片描述

flex子级上的属性

order

排列在前面还是后面，默认值是0；绝对定位子元素。

.wrapper{
            width: 600px;
            height: 600px;
            border: 1px solid black;
            display: flex;            
        }
        .content{
            width: 100px;
            height: 200px;
            border: 1px solid blue;
        }
        .content:first-of-type{
            order: 2;
        }
        .content:nth-of-type(2){
            order: 1;
        }

在这里插入图片描述

align-self

子项的对齐方式，优先级：align-items < align-self < align-content

如果值为「auto」，则计算值为父元素的 <’ align-items '> 值，否则为指定值。

flex-grow

有剩余空间按照比例平分，默认值是0；

.wrapper {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            display: flex;
        }
        .content {
            width: 100px;
            height: 200px;
            border: 1px solid blue;
            box-sizing: border-box;
        }
        .content:first-of-type {
            flex-grow: 1;
        }
        .content:nth-of-type(2) {
            flex-grow: 2;
        }

1:2:0 300px
100px 200px 0px
200px 300px 100px
在这里插入图片描述

flex-basis

简单理解为宽度，width，默认值为width，若设置了flex-basic就以它为标准。

.wrapper {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            display: flex;
        }
        .content {
            width: 100px;
            height: 200px;
            border: 1px solid blue;
            box-sizing: border-box;
        }
        .content:first-of-type {
            flex-basis: 200px;
        }
        .content:nth-of-type(2) {
            flex-basis: 50px;
        }

在这里插入图片描述

flex-shrink

当不换行且父级装不下子级时，就会shrink（收缩）。默认值为1；

  1. 当子级的宽高一样时，和flex-grow一样按照比例收缩。
  2. 当子级的宽高不一样，那么是按照加权后的比例收缩。
  • 当子级的宽高不一样，那么是按照加权后的比例收缩。
.wrapper {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            display: flex;
        }
        .content {
            width: 100px;
            height: 200px;
        }
        .content:first-of-type {
            flex-basis: 300px;
        }
        .content:nth-of-type(2) {
           flex-basis: 400px;
        }

当子级的宽高不一样，那么是按照加权后的比例收缩。

盒子1: 300px - 75px = 225px
/* 
                        300px(真实内容区的宽content) * 1
            ---------------------------------- x 200px(多出来的) = 75px
            300px * 1 + 400px * 1 + 100px * 1
         */

盒子2:400px - 100px = 300px

/* 
                        400px（真实内容区的宽content） * 1
            ---------------------------------- x 200px(多出来的) = 100px
            300px * 1 + 400px * 1 + 100px * 1
         */

在这里插入图片描述

flex-basis和width

在元素里面有内容时：
- 只写flex-basis或者flex-basis大于width，代表元素的最小宽度。
- width大于flex-basis，flex-basis =< realWidth =< width。

flex-shrink和flex-basis

元素内容区是英文，尽管设置了flex-shrink，元素还是会被英文撑开。解决方法是打破英文不换行：word-break:breal-word;

.wrapper {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            display: flex;
        }
        .content {
            height: 200px;
            /* word-break: break-word; */
        }
        .content:first-of-type {
            background: brown;
            flex-basis: 200px;
            flex-shrink: 5;
        }
        .content:nth-of-type(2) {
            background: rgb(80, 70, 70);
            flex-basis: 200px;
            flex-shrink: 1;
        }
        .content:nth-of-type(3) {
            background: rgb(80, 43, 139);
            flex-basis: 400px;
            flex-shrink: 1;
        }

<div class="wrapper">
        <div class="content">ssadsadasdasdasdasdasdasdasdasdasdastoken</div>
        <div class="content"></div>
        <div class="content"></div>
    </div>

在这里插入图片描述

  • 设置word-break：break-word；后
    在这里插入图片描述

中间固定两边自适应

利用flex

.wrapper {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            display: flex;
            /* 可拖拽 */
            resize: both;
            overflow: hidden;
        }
        .content {
            flex: 1 1 auto;
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        .content:nth-of-type(2) {
            flex: 0 0 150px;
            border: 1px solid black;
        }

在这里插入图片描述

流式布局

.wrapper {
            width: 300px;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            /* 可拖拽 */
            /* resize: both;
            overflow: hidden; */
        }
        .content{
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            
            /* background: chartreuse; */
            border: 1px solid black;
        }

圣杯布局

.wrapper {
            width: 300px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            flex-direction: column;
            /* 可拖拽 */
            resize: both;
            overflow: hidden;
        }

        .header,
        .footer,
        .left,
        .right {
            flex: 0 0 20%;
            box-sizing: border-box;
            border: 1px solid black;
        }

        .wrapper .contain {
            flex: 1 1 auto;
            display: flex;
        }
        .center{
            flex: 1 1 auto;
        }

<div class="wrapper">
        <div class="header"></div>
        <div class="contain">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </div>

在这里插入图片描述

tscn1
关注
专栏目录
web一阶段 day20
gaoyuan0277的博客
08-05 193
flex-wrap属性：指定弹性盒子的子元素换行方式换行，第一行显示在上方换行，第一行显示在下方默认值，不换行注意：父元素有固定高度且高度大于子元素换行后高度之和换行中间有缝隙父元素高度有内容撑开换行没有缝隙align-content属性：折行,行与行之间有间隙,去除间隙 （去掉了中间的间隙）要设置： flex-wrap: wrap;顶端没有行间距底对齐没有行间距居中没有行间距两端对齐，中间自动分配, 元素位于各行之间留有空白空间。...
flex弹性盒子
weixin_43465508的博客
03-28 437
弹性盒子是一种用于按行或者按列布局的一维布局方法，元素可以膨胀以填充额外的空间，缩小以适应更小的空间。
css之弹性盒布局
m0_67535399的博客
03-06 889
常用于移动端的布局
Flex布局设置内容强制不换行无效的解决方法
u014785859的博客
06-15 3914
使用弹性盒子Flex布局非常方便，比如实现左右布局的时候，简短的两行样式就实现了。不过虽然Flex布局很灵活，但有时候也会出现一些意想不到的效果...
弹性盒布局
m0_51621504的博客
03-06 345
弹性盒布局
弹性盒子常用属性
hunterend的博客
07-17 278
用于多行布局时控制行与行之间的对齐方式。仅在有换行的情况下生效。：用于定义弹性容器中项目的排列方向。：控制项目在主轴上的对齐方式。：控制项目在辅轴上的对齐方式。：用于启用弹性盒子布局。：用于定义项目的换行方式。可以创建一个弹性容器。
flex弹性盒子布局实例
11-08
3. 弹性项目（Flex Items）：flex容器的子元素，沿主轴排列。 二、Flexbox关键属性 1. `flex-direction`：定义主轴的方向，可设置为`row`（默认，从左到右）、`row-reverse`（从右到左）、`column`（从上到下）或`...
JS Web Flex弹性盒子模型代码实例
10-15
JavaScript Web中的Flex弹性盒子模型（Flexbox）是一种强大的布局模式，它使得在不同屏幕尺寸和设备上创建响应式和灵活的网页布局变得简单。在Web开发中，Flexbox解决了传统CSS布局方式（如浮动和定位）无法完美解决...
css3弹性盒子flex实现三栏布局的实现
01-22
弹性盒子本身就是并排的，我们设置宽度即可。 用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex...
弹性盒子模型笔记
码小余の博客
03-29 1392
弹性盒子模型 一、弹性盒子模型的相关概念 ● 伸缩容器(flex container) :包裹伸缩项目的父元素。 ● 伸缩项目(flex item) :伸缩容器的每个子元素。 ● 轴(axis):每个弹性盒子模型拥有两个轴。 ◆ 主轴(main axis) : :伸缩项目沿其一次排列的轴被称为主轴。 ◆ 侧轴(cross axis) :垂直于主轴的轴被称为侧轴。 ● 方向(direction):伸...
设置主轴方向和弹性盒子换行~~~~
weixin_57320268的博客
02-14 3582
1. 主轴默认是水平方向, 侧轴默认是垂直方向 修改主轴方向属性: flex-direction 属性值 作用 row 行, 水平(默认值) column *列, 垂直 row-reverse 行, 从右向左 column-reverse 列, 从下向上 flex-direction：column; 修改完毕，主轴是Y轴， 侧轴是X轴。 2.弹性盒子换行 特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，
JS之弹性盒模型详解
qq_41260655的博客
10-13 2131
弹性盒模型 作用 :用于页面的布局 对于布局之前知道哪些？ 1、display:inline:缺点：文本极限对齐，解析空格 2、浮动：flow（本质：图文混排）：缺点：高度塌陷 3、定位：相对，绝对 弹性布局是父元素控制子元素的布局方案，不需要计算，自动分配 父元素：display:flex //开启弹性盒模型（默认子元素，从左向右排列，（无论块级还是行内元素）） 我们平时： display：block；块级元素本身本质是display:block-block(对外，对内都是表现块级元素) display
ul弹性怎么一行显示_弹性盒模型
weixin_39829073的博客
12-06 487
一、CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 二、浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在数字后面的 ...
快速掌握flex弹性盒子布局
qq_39055970的博客
06-12 5677
flex弹性盒子布局前言详解flex布局写一个简单flex布局的步骤1、设置flex容器（弹性盒子）2、设置项目的大小比例（1）默认占满整行的写法（项目使用flex-grow属性）（3）默认最多占满整行的写法（项目使用width属性）3、换行处理（响应式布局需要）（1）设置容器换行（flex-wrap）（2）设置项目宽度（width百分比）4、调整容器内项目间距5、盒子模型所有属性（1）容器属性（2）项目属性 前言 网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 di
弹性盒子换行（重点）
shjd_J的博客
05-17 4738
弹性盒子换行（重点） 特别是多行的情况下，我们需要给弹性盒子换行，给 父盒子 弹性容器加。 flex-wrap: wrap; 设置主轴方向（重点） flex-direction: column; 让我们的主轴设置为垂直。 默认的是 row 水平的。 ...
智能布局（ 弹性盒 ）
AI-fisher的博客
10-27 1039
文章目录一、开启弹性盒布局（display）——父容器二、伸缩换行 (flex-wrap)——父容器三、排列方式(flex-direction)——父容器四、伸缩流方向与换行(flex-flow)——父容器五、主轴横向对齐 (justify-content)——父容器六、主轴纵向对齐 (align-content)——父容器七、侧轴对齐（align-items/align-self）——父容器/子...
flex布局（弹性盒子一）
m0_72959685的博客
08-22 8559
这样弹性盒子就开启了。
css布局：弹性盒子
weixin_44971718的博客
07-05 825
弹性盒子（父元素为容器，子元素为项目）： 块级弹性盒子 .box{ display:flex; } 行级弹性盒子（相当于行内块） .box{ display:inline-flex; } 注意事项： 1、弹性容器外及弹性子元素内是正常渲染的，弹性盒子只定义了弹性子元素如何在弹性容器内布局。 2、当父元素设置为弹性盒子（flex）之后，子元素（项目）的float、clear、vertical-align会失效，父元素（容器）的column失效。 容器属性： 1、flex-direct
弹性盒子
weixin_42790916的博客
08-27 1552
弹性盒子基础的属性 display: flex 不管是什么元素都可以添加flex变成弹性盒子 弹性盒子内部的项目直接会变成可设置宽高等属性的元素 容器内部元素默认的按照主轴进行排列 给一个元素添加该属性，则这个元素就会变成弹性盒子模式 如果给元素添加了flex，那么flex内部的元素会自动横向排列 容器 flex-direction ...
flex和grid实现弹性盒子布局
最新发布
06-13
这两种方法都提供了强大的能力，让你能够轻松地处理不同屏幕尺寸下的元素排列和对齐。 **Flexbox（弹性布局）**: - Flexbox主要适用于一维布局，比如一行或一列的内容需要根据容器大小自适应。 - 使用`display: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值