flex布局中容器的属性及使用

最新推荐文章于 2024-05-27 15:28:58 发布
最新推荐文章于 2024-05-27 15:28:58 发布
阅读量1.6k 收藏 3
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyyandyou_6/article/details/81139576
版权

今天学习了flex布局，想要了解flex布局，要知道以下几个概念：

容器：如果我们给一个盒子加上了一个属性display:flex，那么这个盒子就是一个容器。
项目：容器中的它里面的直接子元素就是项目。
主轴：在容器中，项目按一定的方向进行排列的，默认是从左到右进行排列，这个排列的方向，我们称为主轴。（可以理解成x轴）
交叉轴：与主轴垂直的轴（可以理解成y轴）

<style>
div{
//设置这一属性说明div是容器，div中的直接子元素是项目，p是项目，span不是直接子元素，所以不是项目，如果想让span成为项目，则在p标签上设置dispaly:flex;
display:flex; 
}
</style>
<div>
     <p class="son">
        <span></spa>
     </P>
</div>

1、容器的属性常见的有

1. flex-direction ：设置主轴的方向；

取值有：row | row-reverse | column | column-reverse

<!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>
    .wraper{
        display: flex;
        /* flex-direction用来设置主轴的方向  */
        /* flex-direction: row */   /*默认值，主轴水平，从左到右*/
        /* flex-direction: row-reverse; */  /*从右到左 */
        /* flex-direction: column; */   /*主轴垂直，从上到下 */


        flex-direction: column-reverse;   /* 从下到上 */
    }
    .item{
        border: 1px solid red;
        width: 100px;
        height: 100px;

    }
    </style>
</head>
<body>
    <!-- -->
    <div class="wraper">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>

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

2. flex-wrap：功能：用来控制容器中的项目是否换行

取值：wrap | no-wrap | wrap-reverse

<!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>
    .wraper{
        display: flex;  
        width: 250px;

        /*默认值不换行*/
        /* flex-wrap: nowrap; */
        /*当容器宽度不够时，换行*/
        /* flex-wrap: wrap;  */
        /*当容器宽度不够时换行并倒置*/
        flex-wrap: wrap-reverse;

    }
    .item{
        border: 1px solid red;
        width: 100px;
        height: 100px;

    }
    </style>
</head>
<body>
    <div class="wraper">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>

3. flex-flow：功能：简化代码，是flex-direction和flex-wrap的合写

取值：flex-flow:flex-direction，flex-wrap

<!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>
            .wraper{
               height: 250px;
                display: flex;
                flex-flow: column wrap; /*flex-flow是flex-direction和flex-wrap的简写*/
            }
            .item{
                border: 1px solid red;
                width: 100px;
                height: 100px;

            }
            </style>
</head>
<body>
        <div class="wraper">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>

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

4. justify-content 功能：用来处理富余空间。

取值：flex-start | flex-end | center | space-between | space-around

<!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>
            .wraper{
                /* justify-content：处理容器的富裕空间 */
                display: flex;  
                width: 1000px;
                height: 800px;
                border: 1px solid gold;
                /*默认值，项目左对齐*/
                /* justify-content: flex-start; */
                /*项目右对齐*/
                /* justify-content: flex-end; */
                /*项目居中*/
                /* justify-content: center; */
                /*两端对齐,项目之间的间隔相等*/
                /* justify-content: space-between; */
                /*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
                justify-content: space-around;


            }
            .item{
                border: 1px solid red;
                width: 100px;
                height: 100px;

            }
            </style>
</head>
<body>
        <div class="wraper">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
            </div>
</body>
</html>

5. align-items功能：设置项目在交叉轴上的摆放位置

取值：flex-start | flex-end | center | baseline | stretch

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

    .wraper{
        width: 1000px;
        height: 800px;
        display: flex;
        border: 1px solid gold;
        /* align-items: 设置项目在交叉轴上摆放的位置 */
        /*默认值，交叉轴的起始位置*/
        /* align-items: flex-start; */
        /*交叉轴的终点位置*/
        /* align-items: flex-end; */
        /*交叉轴中间对齐*/
        /* align-items: center; */
        /* 项目的第一行文字的基线对齐 */
        /* align-items: baseline; */
        /* stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度 */
        align-items: stretch;


    }
    .item{
        width: 100px;
        /* height: 100px; */
        border: 1px solid red;
    }
    </style>
</head>
<body>
        <div class="wraper">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
            </div>
</body>
</html>

6. align-content 功能：当容器中有多行项目（前提是允许换行），每一行项目就会产生一根主轴，多行项目就有多根主轴。这个属性决定这多根主轴之间的位置关系。

取值：flex-start | flex-end | center | space-between | stretch | space-around

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

            .wraper{
                width: 500px;
                height: 800px;
                display: flex;
                border: 1px solid gold;
                flex-wrap: wrap;
            /* align-content
                功能：   当容器中有多行项目（前提是允许换行），
                        每一行项目就会产生一根主轴，多行项目就有多根主轴
                        这个属性决定这多根主轴与交叉轴之间的位置关系。 */
                /*与交叉轴的中间对齐*/
                /* align-content: center */
                /*与交叉轴起点对齐*/
                /* align-content: flex-start; */
                /*与交叉轴的终点对齐*/
                /* align-content: flex-end; */
                /* 与交叉轴两端对齐，轴线之间的间隔平均分布。 */
                /* align-content: space-between */

                /* 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 */
                /* align-content: space-around */
                /* stretch（默认值）：项目没有高时，轴线占满整个交叉轴。 */
                align-content: stretch;
            }
            .item{
                width: 100px;
                /* height: 100px; */
                border: 1px solid red;
            }
            </style>
</head>
<body>
        <div class="wraper">
                <div class="item" style="width: 200px">1</div>
                <div class="item" style="width: 120px">2</div>
                <div class="item" style="width: 130px">3</div>
                <div class="item" style="width: 170px">4</div>
                <div class="item" style="width: 150px">5</div>
                <div class="item" style="width: 180px">6</div>
        </div>
</body>
</html>

欢迎批评指正

奋斗的妍
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flex弹性盒布局详细讲解
三季人的博客
11-06 1570
flex弹性盒布局一.如何将一个容器设置为弹性容器二.设置弹性容器中弹性元素的排列方式flex-deretion属性三.设置弹性元素的换行四.主轴与垂轴1.概念2.flex-deretion和flex-wrap对主轴和垂轴方向的影响五.主轴与垂轴上的对齐方式justify-content属性align-items属性align-content属性align-selforder属性六.“弹性”flex-shrink属性flex-grow属性flex-basis属性flex属性 一.如何将一个容器设置为弹性容器
CSS通用样式2——Flex布局
qq_66198247的博客
10-18 2764
使用display通用类d-flex或类创建一个flexbox容器，并将子元素转换为flex属性。其中，d-flex类设置对象为弹性伸缩盒子，d-inline-flex类设置对象为内联块级弹性伸缩盒子。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用Flex布局的元素，称为Flex容器( flexcontainer)，简称"容器"。
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）_css flex
最新发布
2401_85124851的博客
05-27 938
Webkit 内核的浏览器，必须加上-webkit前缀。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
Web:flex布局：flex容器中的四个属性的功能，参数，以及作用
ZzzWClock的博客
06-18 1046
flex容器中的四个属性的功能/参数 flex容器是具有：display：flex的属性元素 ↓ 语法定义 <head> <style type="text/css"> #box{ display: flex; } </style> </head> <body> <div id="box"></div> </body&
容器的属性
TiAmo_su的博客
05-27 459
文献种类：专题技术总结文献 开发工具与关键技术： VS 作者：粟源；年级：20级；撰写时间：2021年 5月 27日 文献编号： 归档时间： 2021年 5月 28日 容器的属性 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：VS 作者：粟源 撰写时间：2021/5...
22 flex布局容器六大属性
Blog of Lytracy
10-04 1572
文章目录3、flex-direction4、flex-wrap5、flex-flow6、justify-content7、align-items8、align-content 3、flex-direction flex-direction 属性指定了主轴线的方向，子元素默认是按照主轴线排列的，所以 flex-direction 也指定了弹性子元素在弹性容器中的排列方式， 有以下四个值： row ：（默认）横向从左到右排列。 row-reverse ：顾名思义，从右向左横向排列，反向。 column ： 纵
详解CSS中的flex容器与flex属性
12-13
flex container（flex容器 或 弹性容器） flex容器是flex元素的的父元素。 通过设置display 属性的值为flex 或 inline-flex定义。 注旧版本的属性值： box：将对象作为弹性容器显示。（最老版本）inline-box：将对象...
微信小程序开发中flex布局容器及元素之属性技术释疑.pdf
07-01
微信小程序开发中flex布局容器及元素之属性技术释疑.pdf
浅谈CSS3中display属性的Flex布局的方法
09-24
以下是一些关键的`Flex布局`属性及其功能： 1. `flex-direction`: 定义项目在容器内的排列方向。可选值有`row`（默认，从左到右）、`row-reverse`（从右到左）、`column`（从上到下）和`column-reverse`（从下到上...
详解flex布局的元素如何分配容器的剩余空间
01-19
不得不感慨在 flex 之前 CSS 的布局功能之弱：基本只能使用一些并非为布局而设计的属性来实现想要的布局——float、inline-block、position、甚至是 table 等。而使用这些属性来实现各种布局效果，往往又会遇到相当...
flex布局小结（二）--容器的属性
Ldcrle的博客
06-01 556
flex布局小结（二）--容器的属性 flex布局中对属性的设置基本上分为两大块：容器的属性和项目的属性。 flex容器一般设置有6大属性： flex-direction flex-wrap flex-flow justify-content align-items align-content 参考资料： 阮一峰老师Flex 布局教程：语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 菜鸟教程：https://www.runoo
flax布局
maijiecao的博客
09-17 1023
flax布局 flax布局:Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。Webkit 内核的浏览器，必须加上-webkit前缀。注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效 .box{ display: flex; } .box{ display: inline-flex; } .box{ displa
Flex布局(基本概念,容器属性,项目属性)
谢谢你的关注
07-24 448
1.所有的元素都可以应用flex布局 2.所有应用flex布局的子元素float,clear及vertical-align属性都将失效
Flex 弹性盒子布局(容器、项目)
Dwyane、的博客
06-15 709
一：简介 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 二：容器的属性 1.flex-direction 属性决定主轴的方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端。 .
Flexbox 弹性布局
Night-Monkey的博客
05-10 151
在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种： 块（Block），用于网页中的部分（节） 行内（Inline），用于文本 表，用于二维表数据 定位，用于元素的明确位置 通过将display属性设置为flex，flex 容器将可伸缩 弹性布局中必须有一个display属性设置为flex的父元素。 弹性容器的直接子元素会自动成为弹性项目。 flex-direction 属性 定义容器要在哪个方向上堆叠 flex 项目 flex-directio...
弹性（Flex）布局的使用
weixin_42556618的博客
02-04 1146
最近我参与实施的两个项目中，一个页面交互复杂，而另一个相对传统，两个项目相比之下凸显出了页面布局样式的时间占比不可忽视，使用了弹性布局代码量精简了不少。 虽说如此，弹性布局往往会有些潜在的问题，且改动后，要立即查看页面也需要不少时间，因此我把项目中使用弹性布局过程中遇到的问题稍作整理，为大家以后使用时，可以有效规避这些麻烦。 使用场景 前端开发中，网页布局是很重要的一部分。之前传统布局...
Flex弹性布局
weixin_44560992的博客
06-19 614
开发工具与关键技术：Visual Studio 2015 ,MVC 作者：任浩基 撰写时间：2019/6/5 今天我们就来讲讲Flex弹性布局，相信懂编程的人，都应该听过这个词吧—Flex。那么Flex弹性布局是用来干嘛的呢？顾名思义就是用来实现一套实用程序。我们在一引入新的Flex弹性布局，可以通过实现一整套响应灵活的实用程序，快速管理栅格的列、导航、组件等的布局、对齐和大小。通过进一步的定义...
细说css3 flex布局之flex容器属性
寒影空间的博客
07-24 3169
flex是flexible box的缩写，意为弹性布局。用来为盒模型提供最大的灵活性。任何一个容器都可以通过设置display为flex或inline-flex将其指定为flex布局。设置flex布局之后，子元素的float、clear和vertical-align属性将失效。
弹性布局说明及flex容器属性
weixin_44111864的博客
04-05 712
一、弹性布局 说明： a) 给元素设置了display:flex;后，就成为了弹性盒或者弹性布局 b) 当父元素设置了flex后，子元素的float，clear和vertical-align将会失效 c) 我们把设置display:flex;属性的元素称之为Flex容器，把里面的子元素称之为Flex项目 d) 当给元素设置了display:flex;后，会产生两根轴线：主轴和交叉轴 ♥二、flex...
css的flex布局中各个属性
07-16
Flex布局中常用的属性有： 1. flex-direction：设置主轴的方向，可以是row（水平方向），column（垂直方向），row-reverse（水平方向反转），column-reverse（垂直方向反转）。 2. flex-wrap：设置是否换行，默认为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值