flex弹性盒

最新推荐文章于 2024-05-14 15:43:55 发布
最新推荐文章于 2024-05-14 15:43:55 发布
阅读量156 收藏
点赞数
分类专栏： 前端 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44003391/article/details/122312658
版权

flex

文章目录

一、flex是什么？ flex(弹性盒、伸缩盒)

1、是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
2、 flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
3、 弹性容器
4、 要使用弹性盒，必须先将一个元素设置为弹性容器
5、 我们通过 display 来设置弹性容器

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

6、 弹性元素

         弹性容器的子元素是弹性元素（弹性项）
         弹性元素可以同时是弹性容器

1、 flex-direction 指定容器中弹性元素的排列方式

      可选值：
	      row 默认值，弹性元素在容器中水平排列（左向右）
		       主轴 自左向右
		       row-reverse 弹性元素在容器中反向水平排列（右向左）
          主轴 自右向左
                column 弹性元素纵向排列（自上向下）
                column-reverse 弹性元素方向纵向排列（自下向上）

            主轴：
                弹性元素的排列方向称为主轴
            侧轴：
                与主轴垂直方向的称为侧轴

2、弹性元素的属性：

  • flex-grow 指定弹性元素的伸展的系数

         当父元素有多余空间的时，子元素如何伸展
     父元素的剩余空间，会按照比例进行分配

  • flex-shrink 指定弹性元素的收缩系数

         当父元素中的空间不足以容纳所有的子元素时，如果对子元素进行收缩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 500px;
            border: 10px red solid;
            /* 将ul设置为弹性容器 */
            display: flex;

            /* 
               flex-direction 指定容器中弹性元素的排列方式
                可选值：
                    row 默认值，弹性元素在容器中水平排列（左向右）
                        - 主轴 自左向右
                    row-reverse 弹性元素在容器中反向水平排列（右向左）
                        - 主轴 自右向左
                    column 弹性元素纵向排列（自上向下）
                    column-reverse 弹性元素方向纵向排列（自下向上）

                主轴：
                    弹性元素的排列方向称为主轴
                侧轴：
                    与主轴垂直方向的称为侧轴

            */

            flex-direction: row;
        }

        li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;

            /* 
                弹性元素的属性：
                    flex-grow 指定弹性元素的伸展的系数
                    - 当父元素有多余空间的时，子元素如何伸展
                    - 父元素的剩余空间，会按照比例进行分配
                    flex-shrink 指定弹性元素的收缩系数
                    - 当父元素中的空间不足以容纳所有的子元素时，如果对子元素进行收缩
            */
            /* flex-grow: 1; */

            /* 
            
            */
            flex-shrink: 0;

            
        }
        li:nth-child(1){
            flex-grow: 0;
            flex-shrink: 1;
        }

        li:nth-child(2){
            background-color: pink;
            /* flex-grow: 2; */
            flex-shrink: 2;
        }

        li:nth-child(3){
            background-color: orange;
            /* flex-grow: 3; */
            flex-shrink: 3;
        }
    </style>
</head>
<body>
    <!-- 
        flex(弹性盒、伸缩盒)
            - 是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
            - flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
            - 弹性容器
                - 要使用弹性盒，必须先将一个元素设置为弹性容器
                - 我们通过 display 来设置弹性容器
                    display:flex  设置为块级弹性容器
                    display:inline-flex 设置为行内的弹性容器

            - 弹性元素
                - 弹性容器的子元素是弹性元素（弹性项）
                - 弹性元素可以同时是弹性容器

     -->

     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>

</body>
</html>

在上诉中，发现，如果一行排列的超过它的宽度，它会自动进行收缩，而不会进行下一行排列

flex-wrap

设置弹性元素是否在弹性容器中自动换行

    可选值：
           nowrap 默认值，元素不会自动换行
           wrap 元素沿着辅轴方向自动换行
           wrap-reverse 元素沿着辅轴反方向换行

     flex-wrap: wrap-reverse;

 flex-flow:  wrap 和 direction 的简写属性 */
            /* flex-flow: row wrap; */

justify-content

  • 如何分配主轴上的空白空间（主轴上的元素如何排列）

  • 可选值：

       flex-start 元素沿着主轴起边排列
   flex-end 元素沿着主轴终边排列
   center 元素居中排列
   space-around 空白分布到元素两侧
   space-between 空白均匀分布到元素间
   space-evenly 空白分布到元素的单侧

align-items:

  • 元素在辅轴上如何对齐

  • 元素间的关系

     可选值：
       stretch 默认值，将元素的长度设置为相同的值
       flex-start 元素不会拉伸，沿着辅轴起边对齐
       flex-end 沿着辅轴的终边对齐
       center 居中对齐
       baseline 基线对齐

align-content

align-self: 用来覆盖当前弹性元素上的align-items

align-self: stretch;

1、案例：让块元素水平居中

方式一

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 400px;
            height: 400px;
            background-color: #bbffaa;
            /*设置flex*/
            display: flex;
            /*设置它可以换行*/
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: red;

        }
    </style>
</head>
<body>
<div class="one">
    <div class="two">

    </div>
</div>
</body>
</html>

方式二

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 400px;
            height: 400px;
            background-color: #bbffaa;
            /*设置flex*/
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: red;

        }
    </style>
</head>
<body>
<div class="one">
    <div class="two">

    </div>
</div>
</body>
</html>
SeriesM
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
弹性布局的设置
Watermelon_devil的博客
06-27 880
一，弹性布局 flex就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性 任何一个容器都可以指定为flex布局.box{ display: flex; }行内元素当然也可以使用flex布局.box{ display: inline-flex; }内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex; }注意：设为 Flex 布局以后，子元素的float、clear和vertica
转---30 分钟学会 Flex 布局
weixin_34216107的博客
03-04 189
正文从这开始～ Flex 基本概念： 在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。 在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cro...
弹性布局
m0_62697897的博客
09-22 475
（5）space-around：每个元素之间间隔相等，两边元素循环间隔之和和其他元素间隔相等。（4）column-reverse：主轴方向为垂直方向，起点在下边。（2）row-reverse：主轴方向为水平方向，起点在右端。（4）space-between：两端对齐，中间元素间隔相等。（1）row(默认)：主轴方向为水平方向，起点在左端。（3）column：主轴方向为垂直方向，起点在上边。（1）flex-start（默认值）：轴起点对齐。（1）flex-start:（默认）轴起点对齐。
【移动开发】弹性布局详细讲解
yubao0723的专栏
01-09 3021
移动端开发常用布局之弹性布局详细讲解。
【案例练习】13—41个网页设计效果的代码生成器工具
web前端开发
02-26 2379
英文 | https://us.niemvuilaptrinh.com/article/41-free-generator-tools-for-web-design今天我们将学习使用 HT...
JS Web Flex弹性盒子模型代码实例
10-15
主要介绍了JS Web Flex弹性盒子模型代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
flex弹性盒子布局实例
11-08
flex弹性盒子布局实例，本次博客实例需要的一些资源，源代码，可自行下载研究，一起进步，共勉，一起加油
webApp flex弹性盒子
12-05
web app flex弹性盒子布局教程，很丰富的布局案例
几个CSS3的flex弹性盒模型布局的简单例子演示
09-24
主要介绍了几个CSS3的flex弹性盒模型布局的简单例子演示,flex布局是迄今为止最强大的web布局方式,需要的朋友可以参考下
HTML中用弹性布局设置位置,详解CSS3 弹性布局快速入门
weixin_30413679的博客
06-07 1046
前言弹性布局是新一代的布局方式，传统布局中使用浮动布局会给我们带来不少弊端，如CSS代码高度依赖于HTML代码结构等等，下面我将用几个例子让大家快速学会弹性布局。PS：弹性布局适用于较简单的场景，过于复杂的场景可以尝试着使用CSS3的Grid布局，弹性布局在PC端中还存在兼容性问题，移动端中无兼容性问题，可以放心使用。1.容器属性css3为新增的弹性布局提供了多个属性，分别为弹性盒模型的容器属性，...
CSS 弹性布局如何实现
curry_zhao的博客
01-10 2369
 转自:http://www.blueidea.com/tech/web/2011/8693.asp 背景 首先,我们有表格布局。当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局。 然后是现在大多数人都在使用的浮动布局。我们可以使用任何我们想用的元素,但浮动并不适用于初学者。表面上它看起来很基础,但背后复杂的功能可以使经验丰富的开发者看着自己的屏
如何使用弹性布局？如何做到自适应?
lyx9611的博客
05-18 1864
1、简单介绍如何使用弹性布局 1、父元素必须的属性：display:flex;； 这里，我一般都会写一个弹性样式的class，如下： /*默认横向显示的*/ .flex-row{ display:flex } /**写一个纵向显示的*/ .flex-column{ display:flex; flex-direction:column; } 这样，父级元素的弹性盒子我们就写好了。 2、如果我们想换行怎么办？默认是不换行的哦；只需要再父级元素上加上下面的这个样式即可。 flex-wrap:wrap;
学习笔记——使用弹性布局
qq_41339126的博客
10-28 587
弹性布局：为盒模型提供了较大的灵活性 定义：任何盒子设置了display属性为flex，则该盒子本身开启了弹性布局。webkit内核的浏览器则需要加-webkit前缀。 弹性容器：display属性设置为flex的盒子。 弹性项目：弹性容器的子元素（孙子元素不包括在内）。 “主轴”和“交叉轴”是弹性容器内存在的两个轴，它们永远是垂直的。 属性：弹性容器中的属性设置及其表现 1.设置display: flex开启弹性布局 2.设置flex-wrap: nowrap（默认值） | w
CSS弹性布局
m0_52972784的博客
03-26 2646
CSS弹性布局 定义需要添加弹性布局的父元素为容器box，弹性布局容器内的每一个子元素称为项目 一些注意的点： （1）给父容器添加display:flex或是display:inline-flex属性，就可以使容器内内容采用弹性布局显示 （2）display:flex：容器添加弹性布局后，显示为块级元素 （3）display:inline-flex：容器添加弹性布局后，显示为行级元素 （4）将父容器设为弹性布局后，子项目的 float、clear 和 vertical-align属性将失效，但pos
弹性布局（基础）
WishZJ的博客
07-02 1105
弹性布局 弹性布局是一种全新的布局方式 我们之前的传统布局，基于盒模型，依赖display + position + float。我们之前的处理方式对于某些布局，排布起来不是特别方便，比如：元素垂直居中 flex布局是w3c推出的一种新的布局方案，可以简便，完成，响应式的实现各种页面布局，目前，flex布局已经适配与所有浏览器 基于盒模型 + flex布局 flex的基本概念： 1.容器(flex container)：设置了display：flex或者inline-flex的元素 2.弹性子元素(flex
CSS弹性布局（一）
weixin_43885459的博客
12-26 4718
弹性布局可以用于做响应式页面的制作 使用弹性布局需要使用要display里的flex属性 例：让一个div是弹性布局，代码如下 .div{ display:flex; } flex里有很多属性，其中设置在容器上的属性有6个 1.flex direction:决定主轴的方向（即项目的排列方向）。 ...
常见布局—弹性布局
热门推荐
一只前端小菜鸟
03-27 1万+
在常见的布局中，通常有一部分是固定高度，而其他部分是剩余大小分配的，这种情况我们可以使用弹性布局。 说到弹性布局，就得介绍一下css属性中的弹性盒——display:flex 它分为主轴和交叉轴两个方向，没有固定的方向，默认主轴是X轴，交叉轴是Y轴，也可以通过属性 flex-direction: column来设置主轴为Y轴 主轴是X轴，意味着它会把子元素横向排列，所有子元素都到一行，Y轴也...
弹性布局详解——5个div让你学会弹性布局
weixin_34211761的博客
07-20 1006
　在网页制作过程中，布局是我们最重要的一个环节。可以说布局的好坏直接影响到整个网页的成败！布局成，则事半功倍；布局败，则事倍功半。 随着移动互联的到来，响应式网站风靡。这也就兴起了一种新兴的布局方式——弹性布局。取代我们之前“display+float+position”的布局形式，采用全新的弹性布局，会让你的网站如丝般顺滑！ 今天，就让我们一起来学习一下弹性布局，让我们用5个div玩转弹性布...
CSS3 新特性
最新发布
niceffking的博客
05-14 712
CSS3新增选择器 　 属性选择器 　 结构选择器 　 伪元素选择器 盒子模型 图片模糊 calc函数 过渡
flex弹性盒子属性
08-16
Flex弹性盒子属性有以下几个常用的： 1. `flex-grow`：定义子元素的放大比例，默认为0，表示不放大。如果所有子元素都设置了该属性，它们将按照比例分配剩余空间。 2. `flex-shrink`：定义子元素的缩小比例，默认...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值