弹性盒子布局

最新推荐文章于 2022-10-10 22:23:00 发布
最新推荐文章于 2022-10-10 22:23:00 发布
阅读量591 收藏
点赞数
文章标签： 前端 前端框架 firefox
原文链接：https://blog.csdn.net/wyhstars/article/details/78442728
版权

容器属性：

1. flex-direction属性：决定主轴的方向（即项目的排列方向）;
2. flex-wrap属性：规定如果一条轴线排不下，如何换行；
3. flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row/nowrap；
4. justify-content属性：定义了项目在主轴上的对齐方式；
5. align-items属性：定义项目在交叉轴上如何对齐；
6. align-content属性：定义了多根轴线的对齐方式；

容器属性具体实现效果：

一、flex-direction属性：决定主轴的方向（即项目的排列方向）。


- row（默认值）：主轴为水平方向，起点在左端；
- row-reverse：主轴为水平方向，起点在右端；
- column：主轴为垂直方向，起点在上沿；
- column-reverse：主轴为垂直方向，起点在下沿。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            display: flex;
            /*flex-direction: row;         //水平方向，起点在左端;
            flex-direction: row-reverse;   //水平方向，起点在右端;
            flex-direction: column;        //垂直方向，起点在上沿;
            flex-direction: column-reverse;//垂直方向，起点在下沿。
            */
        }

        #div1, #div2, #div3 {
            width: 300px;
            height: 200px;
        }

        #div1 {
            background-color: #859aff;
        }

        #div2 {
            background-color: #9d4c48;
        }

        #div3 {
            background-color: #58a429;
        }
    </style>
    <title>弹性盒子</title>
</head>
<body>
<div id="box">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>
</body>
</html>

二、flex-wrap属性：
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

- nowrap（默认）：不换行；
- wrap：换行，第一行在上方；
- wrap-reverse：换行，第一行在下方。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            display: flex;
            /*flex-wrap: nowrap;        //不换行;
              flex-wrap: wrap;          //换行，第一行在上方;
              flex-wrap: wrap-reverse;  //换行，第一行在下方。*/

        }

        #div1, #div2, #div3,#div4,#div5,#div6 {
            width: 300px;
            height: 200px;
        }

        #div1 {
            background-color: #859aff;
        }

        #div2 {
            background-color: #9d4c48;
        }

        #div3 {
            background-color: #58a429;
        }

        #div4 {
            background-color: #16a497;
        }

        #div5 {
            background-color: #a44166;
        }

        #div6 {
            background-color: #1ca460;
        }
    </style>
    <title>弹性盒子</title>
</head>
<body>
<div id="box">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
    <div id="div6">6</div>
</div>
</body>
</html>

三、flex-flow属性：
是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

四、justify-content属性：定义了项目在主轴上的对齐方式。

- flex-start（默认值）：左对齐；
- flex-end：右对齐；
- center： 居中；
- space-between：两端对齐，项目之间的间隔都相等；
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            display: flex;
            /*justify-content: flex-start;       //左对齐;
            justify-content: flex-end;         //右对齐;
            justify-content: center;           //居中;
            justify-content: space-between;    //两端对齐，项目之间的间隔都相等;
            justify-content: space-around;     //每个项目两侧的间隔相等。
*/

        }

        #div1, #div2, #div3,#div4,#div5,#div6 {
            width: 300px;
            height: 200px;
        }

        #div1 {
            background-color: #859aff;
        }

        #div2 {
            background-color: #9d4c48;
        }

        #div3 {
            background-color: #58a429;
        }

        #div4 {
            background-color: #16a497;
        }

        #div5 {
            background-color: #a44166;
        }

        #div6 {
            background-color: #1ca460;
        }
    </style>
    <title>弹性盒子</title>
</head>
<body>
<div id="box">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
    <div id="div6">6</div>
</div>
</body>
</html>

五、align-items属性：定义项目在交叉轴上如何对齐。

- flex-start：交叉轴的起点对齐；
- flex-end：交叉轴的终点对齐；
- center：与交叉轴的中点对齐；
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布；
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍；
- stretch（默认值）：轴线占满整个交叉轴。

 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            display: flex;
            align-content: flex-start;
            align-content: flex-end;
            align-content: center;
            align-content: space-between;
            align-content: space-around;
            align-content: stretch;
        }

        #div1, #div2, #div3, #div4, #div5, #div6 {
            width: 300px;
            height: 200px;
        }

        #div1 {
            background-color: #859aff;
        }

        #div2 {
            background-color: #9d4c48;
        }

        #div3 {
            background-color: #58a429;
        }

        #div4 {
            background-color: #16a497;
        }

        #div5 {
            background-color: #a44166;
        }

        #div6 {
            background-color: #1ca460;
        }
    </style>
    <title>弹性盒子</title>
</head>
<body>
<div id="box">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
    <div id="div6">6</div>
</div>
</body>
</html>

知识园
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS day12 移动端布局练习
qq_34620296的博客
09-13 707
<!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-U...
弹性盒子布局实例详解：从水平布局到垂直布局
最新发布
weixin_43578304的博客
02-27 1284
在CSS中，弹性盒子布局（Flexbox）提供了一种在容器内高效、灵活地对齐和分布空间的方式。无论是水平布局还是垂直布局，Flexbox都能轻松应对。下面我们将通过几个实例来详细讲解如何在水平和垂直方向上应用Flexbox布局。
2021-11-07 CSS弹性布局及其他常用属性
weixin_54158370的博客
11-07 299
1.弹性布局 设置方式：display:flex（默认按行显示），默认水平轴为x轴，当按列显示时竖着的为x轴。 弹性布局常用属性： justify-content（设置x轴的内容布局方式）：默认从头（起点）flex-start排列，space-between:两端对齐，space-around平均间隔，flex-end排在最末尾。 flex-direction：设置排列方式，默认row按行排列。 flex-flow：设置排列方式以及换不换行，默认nowrap不换行。 a
CSS3 flex弹性布局
xiangxiongfly
07-21 1559
CSS3新增了一种新型的弹性盒子模型。通过弹性盒子模型，我们可以轻松地创建自适应浏览器窗口的“流动布局”以及自适应字体大小的弹性布局，使得响应式布局的实现更加容易。 此外记住一点：在使用弹性盒子模型之前，你必须为父元素定义display:flex;或display:inline-flex;，这样父元素才具有弹性盒子模型的特点。
flex弹性布局
aliven1的博客
03-02 478
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 flex-flow: row-reverse wrap; 项目的属性 1.order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 2.flex-grow属性:flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大( 如.........
flex弹性盒子布局实例
11-08
flex弹性盒子布局实例，本次博客实例需要的一些资源，源代码，可自行下载研究，一起进步，共勉，一起加油
AngularJS 实现弹性盒子布局的方法
10-21
本文给大家带来一段简短代码实现angularjs弹性布局效果，非常实用，对angularjs弹出布局知识感兴趣的朋友可以参考下
flexie:一个简单的弹性盒子布局实现
06-22
灵活的 Flexie 是一个简单灵活的 HTML 布局管理器。 它不是CSS3 灵活框布局实现 用法 父元素需要一个data-flex属性，以及一个可选的data-flex-direction值，可以是vertical或... 调整大小的元素也可以是弹性容器。
CSS弹性盒子.docx
02-29
弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种...
css学习笔记-flex布局
Laollaoaolao的博客
08-10 634
概述 基本概念 举例 设置display: flex之前 容器内的元素会默认垂直排列(沿着主轴排列) 设置display: flex之后; flex容器内的flex-item将会默认水平排列 <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"&gt
详解CSS3弹性伸缩盒
01-18
用途 弹性盒子对于前端web网页布局来说，有着举足轻重的作用，移动端也是如此。掌握了弹性盒子用法，对于目前编写自适应页面很重要。掌握这种布局规则，是一项必备技能。   弹性伸缩盒模型说明 主轴（main axis） 是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end**。 交叉轴（cross axis） 是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end**。 设置了 display: flex 的父元素
CSS中的弹性盒子总结
m0_55870194的博客
03-23 623
一、弹性盒布局相关词汇 图中是一个 flex-direction 属性为 row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。 1.弹性容器(Flex container) 包含着弹性项目的父元素。通过设置 display属性的值为 flex或 inline-fle来定义弹性容器。 2.弹性项目(Flex item) 弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。 3.轴(Axis) 每个弹性框布局
CSS3 弹性盒子
weixin_44037272的博客
04-07 341
CSS 弹性盒子（ Flexible Box 或 flexbox）布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。 引入弹性盒布局模型的目的是提供一种更加有效的方式
Bootstrap——flex布局（定义弹性盒子、排列方向、内容排列、项目对齐、自身对齐、自动对等、等宽变换、自动边距、包裹、排序、对齐内容）
m0_69034993的博客
10-10 4082
使用flexbox容器上的.justiiy-content-*类可以改变flex子元素在主轴上的对齐（默认x轴开始，如果flex-direction:column则为y轴开始）*可以是从start(浏览器默认值）、end、center、between或around。改变Flex子容器在Flex容器中的包裹方式（可以实现弹性布局），其中包括无包裹.flex-nowrap类（浏览器默认）、包裹.flex-wrap类，或者反向包裹.flex-wrap-reverse类。任何一个容器都可以指定为Flex布局。
Css3 弹性盒子垂直居中
热门推荐
c_Yuan的博客
11-11 1万+
之前在做一个项目的时候，用到弹性盒子垂直居中，鉴于宽度固定，高度不定的缘故，加上里面用的img的src是动态替换的，客户给的图片高度不一致，导致垂直居中的时候，高度较小的图片把整个img的高度固定死了，而致使大图缩小了。找了下方法解决，其实只要把水平和垂直居中都设置，便可以在切换图片的同时，又能够使图片占满宽度。 .flexbox{
CSS自动竖向排列的布局方法
mituan1234567的专栏
03-16 1万+
CSS自动竖向排列的布局方法，像电脑桌面的图标一样，自动竖着排，排满一列后重新进行下一列排序。方法有很多，有人用JS,有人用CSS，不管什么样的方法，简单、兼容就是好代码，本代码仅供参考。 http://www.codefans.net/jscss/code/2856.shtml #mainBox{ border:1px #f00 solid; width:300px;
弹性盒布局（1）
weixin_42281142的博客
12-22 337
弹性盒布局 flex是Flexinle Box的缩写，意思就是弹性布局，使用flex进行布局的方式，就叫做弹性盒布局。 flex的基本概念 设定了display：flex属性的容器，默认从左上方有两条轴线，x轴即水平轴（main axis）和y轴（corss axis），其被称为flex容器，其子元素被称为容器项目。 flex容器里面的项目默认为横向排列。 &amp;amp;lt;div style=&amp;quot;displ...
基本flex弹性盒布局
weixin_73140902的博客
08-16 1014
flex弹性盒布局是css中最基础的一种布局方法，它可以帮助前端程序员更方便更灵活的对页面进行布局排版。以下就为大家整理一些常见的flex布局的代码和作用，希望可以帮助到有需要的人。
【多列布局 + 弹性盒子 + 响应式布局】
YANG_helloworld的博客
12-27 1142
html5+ css3 相关 (弹性盒子,多列布局,相应式布局)
css3弹性盒子布局
08-25
CSS3弹性盒子布局（Flexbox）是一种用于创建灵活的、响应式的网页布局的技术。它通过定义容器和内部元素之间的关系来实现布局。以下是CSS3弹性盒子布局的一些基本概念和属性： 1. 弹性容器（Flex Container）：使用`display: flex;`或`display: inline-flex;`来定义容器为弹性容器。弹性容器的子元素将根据容器的规则进行布局。 2. 弹性项目（Flex Item）：弹性容器中的子元素被称为弹性项目。可以使用`flex`属性来控制弹性项目在容器中的分布。例如，`flex: 1;`将使项目占据可用空间的比例为1。 3. 主轴（Main Axis）和交叉轴（Cross Axis）：弹性容器具有主轴和交叉轴，它们决定了项目在容器内的布局方向。默认情况下，主轴是水平方向，交叉轴是垂直方向。 4. 弹性盒子属性： - `flex-direction`：指定主轴的方向（row、row-reverse、column、column-reverse）。 - `justify-content`：控制弹性项目在主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around）。 - `align-items`：控制弹性项目在交叉轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）。 - `align-self`：控制单个弹性项目在交叉轴上的对齐方式。可以覆盖`align-items`的设置。 - `flex-wrap`：指定是否换行（nowrap、wrap、wrap-reverse）。 - `flex-flow`：`flex-direction`和`flex-wrap`的简写形式。 - `align-content`：控制多行弹性项目在交叉轴上的对齐方式（flex-start、flex-end、center、space-between、space-around、stretch）。 CSS3弹性盒子布局非常灵活，并且可以适应不同屏幕大小和设备。它被广泛应用于响应式网站设计和移动应用程序的开发中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值