精华内容
下载资源
问答
  • 弹性盒子布局 flex

    2020-12-07 13:38:58
    -- 弹性盒模型 作用用于控制子元素的布局方式 显示规则 所有的子元素都会在主轴上进行排列 主轴 侧轴 主轴和侧轴相对而言 display:flex 形成弹性盒子 弹性盒子 子元素默认的排列状态 因为弹性盒子默认为x轴为主轴 ...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <style>
            .con{
                display: flex;
                height: 200px;
                width: 500px;
                /* flex-direction: column; */
                /* flex-direction: column-reverse; */
                /* flex-direction: row-reverse; */
                /* justify-content: space-around; */
                /* 子元素在弹性盒子中 主轴的对齐方式 */
                /* justify-content: center; */
                /* 弹性盒子最开始的地方 */
                /* justify-content: flex-start; */
                /* 弹性盒子的末端 */
                /* justify-content: flex-end; */
                /* 两端对齐中间自由分配 */
                justify-content: space-between;
                /* 完全自动分配空间 */
                /* justify-content: flex-start; */
                align-items: stretch;
                /* align-items: flex-start; */
                /* align-items: flex-end; */
                /* align-items: center; */
                flex-wrap: wrap;
                /* flex-wrap: nowrap; */
                /* flex-wrap: wrap-reverse; */
                /* align-content: space-around; */
                /* align-content: stretch;*/ /* 默认值 */
    
            }
            div{
                border: 1px solid;
    
                /* margin: auto; */
                width: 100px;
                /* height: 200px; */
                
            }
        </style>
        <section class="con">
            <div>1</div>
            <div>12</div>
            <div>123</div>
            <div>1234</div>
            <div>12345</div>
            <div>123456</div>
            <div>1234567</div>
            <div>12345678</div>
        </section>
        <!-- 
            标准盒模型
                border长在元素宽高之外 padding会把盒子撑大
            怪异盒模型
                border和padding 都是长在元素宽高之内的
            
            标准盒模型 box-sizing:content-box; 默认值
            怪异盒模型 box-sizing:border-box
         -->
         <!-- 
    
            弹性盒模型
                作用用于控制子元素的布局方式
                显示规则
                    所有的子元素都会在主轴上进行排列
                主轴 侧轴   
                    主轴和侧轴相对而言
            display:flex 形成弹性盒子
                弹性盒子 子元素默认的排列状态
                    因为弹性盒子默认为x轴为主轴 所有的子元素
                    都默认横向排列
                如果父元素是弹性盒子 子元素都能设置宽高
                如果父元素是弹性盒子 让子元素居中 只需要给子元素
                添加 margin:auto;
            改变主轴的排列方式 (指定主轴)
                flex-direction:
                    属性值:
                        row x轴为主轴
                        row-reverse
                        column y轴为主轴
                        column-reverse 
            子元素在弹性盒子里面 主轴的对齐方式
                justify-content: 
                    flex-start          弹性盒子的开始的地方。
                    flex-end            弹性盒子的末端
                    center              居中
                    space-between       两端对齐中间自动分配
                    space-around        完全自动分配空间
            侧轴的对齐方式
                align-items:
                    flex-start
                    flex-end
                    center
                    baseline ( 默认和flex-start等效 )
                    stretch (默认值 =》 拉伸)
            控制子元素在弹性盒子中是否换行
                flex-wrap:
                    nowrap 不换行
                    wrap 换行
                    wrap-reverse 反向换行
            控制行与行之间的对齐方式 需要换行 多行才会生效
                align-content:
                    flex-start
                    flex-end
                    center
                    space-between
                    space-around
                    stretch 拉伸
                【注】默认情况下 align-content 在侧轴执行样式
                的时候 会把默认的间距合并
                对于单行子元素 也就是不换的子元素 该元素不起作用
                因为这是用于处理行和行之间的对齐方式
            flex-flow 属性是flex-direction 和 flex-wrap 
            属性的简写形式 默认值 为 row nowrap
            主轴为x 默认不换行
          -->
    </body>
    </html>
    
    展开全文
  • 1. flex项目的属性 以下6个属性设置在项目上。 order flex-grow flex-shrink flex-basis flex align-self 1.1 order属性 order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。 .item { order: <...

    01: 弹性盒子模型介绍 & 游览器调试样式(简单介绍)
    02: 弹性布局和传统布局响应对比
    03: 使用弹性盒子模型布局微信客户端
    04: 声明弹性盒子 & 容器的属性
    05: flex项目的属性
    06: 实例篇-骰子布局
    07: 实例篇-网格布局
    08: 实例篇-圣杯布局
    09: 实例篇-输入框的布局 & 悬挂式布局
    10: 实例篇-固定的底栏 & 流式布局
    11: CSS3 flex弹性布局重点


    1. flex项目的属性

    以下6个属性设置在项目上。

    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self

    1.1 order属性

    order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

    .item {
      order: <integer>;
    }
    

    在这里插入图片描述

    示例代码:

    • html代码:
    <body>
        <div class="tbox">
            <div style="order: 4;">a</div>
            <div style="order: 3;">b</div>
            <div style="order: 1;">c</div>
            <div style="order: 2;">d</div>
        </div>
    </body>
    
    • css代码:
            .tbox {
                display: flex;
                flex-wrap: nowrap;
                justify-content: center;
                height: 20vh;
                background-color: orange;
            }
    
            .tbox>div {
                width: 250px;
                border: 1px solid black;
                height: 10vh;
            }
    
    • 运行效果
      在这里插入图片描述

    1.2 flex-grow属性

    flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

    .item {
      flex-grow: <number>; /* default 0 */
    }
    

    在这里插入图片描述
    示例代码:

    • html代码:
    <body>
        <div class="tbox">
            <div style="flex-grow: 0;">a</div>
            <div style="flex-grow: 1;">b</div>
            <div style="flex-grow: 1;">c</div>
            <div style="flex-grow: 0;">d</div>
        </div>
    </body>
    
    • css代码:
            .tbox {
                display: flex;
                flex-wrap: nowrap;
                justify-content: center;
                height: 20vh;
                background-color: orange;
            }
    
            .tbox>div {
                width: 250px;
                border: 1px solid black;
                height: 10vh;
            }
    
    • 运行效果
      在这里插入图片描述

    1.3 flex-shrink属性

    flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。

    .item {
      flex-shrink: <number>; /* default 1 */
    }
    

    在这里插入图片描述
    示例代码:

    • html代码:
    <body>
        <div class="tbox">
            <div style="flex-shrink: 1;">a</div>
            <div style="flex-shrink: 1;">b</div>
            <div style="flex-shrink: 1;">c</div>
            <div style="flex-shrink: 0;">d</div>
            <div style="flex-shrink: 0;">e</div>
            <div style="flex-shrink: 1;">f</div>
            <div style="flex-shrink: 1;">g</div>
            <div style="flex-shrink: 1;">h</div>
        </div>
    </body>
    
    • css代码:
            .tbox {
                display: flex;
                flex-wrap: nowrap;
                justify-content: center;
                height: 20vh;
                background-color: orange;
            }
    
            .tbox>div {
                width: 250px;
                border: 1px solid black;
                height: 10vh;
            }
    
    • 运行效果
      在这里插入图片描述

    1.4 flex-basis属性

    flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

    .item {
      flex-basis: <length> | auto; /* default auto */
    }
    

    它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

    示例代码:

    取值:用于设置项目宽度,不设置flex-basis,项目会保持默认宽度,或者width为自
    身的宽度。但如果设置了flex-basis,权重比width属性高,因此会覆盖widtn属性。
    
    • html代码:
        <div class="tBox">
            <div class="box">a</div>
        </div>
    
    • css代码
            .tBox {
                width: 500px;
                /* 设置高度为整个网页的高度 */
                height: 100vh;
                display: flex;
                background-color: orange;
            }
    
            .box {
                flex-basis: 100px;
                width: 300px;
                height: 100px;
                background-color: skyblue;
            }
    
    • 运行结果:

    在这里插入图片描述


    1.5 flex属性

    flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

    .item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }
    

    该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。


    1.6 align-self属性

    align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    

    在这里插入图片描述

    该属性可能取6个值,除了auto,其他都与align-items属性完全一致。



    展开全文
  • flex弹性盒子布局实例

    2020-11-08 22:44:04
    flex弹性盒子布局实例,本次博客实例需要的一些资源,源代码,可自行下载研究,一起进步,共勉,一起加油
  • 弹性盒子布局——Flex

    2019-11-17 21:21:15
    2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整...Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex...

    2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

    一、Flex 布局是什么?

    Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

    • 任何一个容器都可以指定为 Flex 布局。
    .box{
      display: flex;
    }
    
    • 行内元素也可以使用 Flex 布局。
    .box{
      display: inline-flex;
    }
    
    • Webkit 内核的浏览器,必须加上-webkit前缀。
    .box{
      display: -webkit-flex; /* Safari */
      display: flex;
    }
    

    注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

    二、基本概念

    采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
    在这里插入图片描述
    容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

    项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

    三、容器的属性

    以下6个属性设置在容器上。

    	flex-direction
    	flex-wrap
    	flex-flow
    	justify-content
    	align-items
    	align-content
    
    3.1 flex-direction属性
    • flex-direction属性决定主轴的方向(即项目的排列方向)。

    在这里插入图片描述

    .box {
      flex-direction: row | row-reverse | column | column-reverse;
    }
    
    • row(默认值):主轴为水平方向,起点在左端。
    • row-reverse:主轴为水平方向,起点在右端。
    • column:主轴为垂直方向,起点在上沿。
    • column-reverse:主轴为垂直方向,起点在下沿。
    3.2 flex-wrap属性
    • 默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
      在这里插入图片描述
    .box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }
    
    • nowrap(默认):不换行。
      在这里插入图片描述
    • wrap:换行,第一行在上方。
      在这里插入图片描述
    • wrap-reverse:换行,第一行在下方。
      在这里插入图片描述
    3.3 flex-flow
    • flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
    .box {
      flex-flow: <flex-direction> || <flex-wrap>;
    }
    
    3.4 justify-content属性
    • justify-content属性定义了项目在主轴上的对齐方式。
    .box {
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }
    

    在这里插入图片描述

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

    3.5 align-items属性

    • align-items属性定义项目在交叉轴上如何对齐。
    .box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }
    

    在这里插入图片描述

    • flex-start:交叉轴的起点对齐。
    • flex-end:交叉轴的终点对齐。
    • center:交叉轴的中点对齐。
    • baseline: 项目的第一行文字的基线对齐。
    • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

    3.6 align-content属性

    • align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
    .box {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }
    

    在这里插入图片描述

    • flex-start:与交叉轴的起点对齐。
    • flex-end:与交叉轴的终点对齐。
    • center:与交叉轴的中点对齐。
    • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    • stretch(默认值):轴线占满整个交叉轴。
    展开全文
  • 弹性盒子布局flex

    2021-11-27 18:08:41
    弹性盒子布局flex开启flex属性布局主轴排列方向:flex-direction内容排列:justfy-content属性align-item属性flex-wrap属性flex-flow属性 开启flex属性布局 display: flex; 主轴排列方向:flex-direction flex-...

    开启flex属性布局

    display: flex;
    

    主轴排列方向:flex-direction

            flex-direction
              值:row            主轴为水平方向,起点在左端
                  row-reverse    主轴为水平方向,起点在右端
                  column         主轴为垂直方向,起点在上面
                  column-reverse 主轴为处置方向,起点在下沿
    

    内容排列:justfy-content属性

    justfy-content属性定义了项目在主轴的方向上的对齐方式
    它可以取5个值,具体对齐方式与轴的方向有关:

       justify-content 定义了项目在主轴上的对齐
                flex-start       左对齐
                flex-end         右对齐
                center           居中
                space-around     盒子两侧间隔相等
                space-between    两端对齐,中间间隔相等
    

    flex-start 效果图
    在这里插入图片描述
    flex-end 效果图
    在这里插入图片描述
    center 效果图
    在这里插入图片描述
    space-around 效果图
    在这里插入图片描述
    space-between 效果图
    在这里插入图片描述

    align-item属性

    它能取5个值。具体的对齐方式与交叉轴的方向有关
    flex-start:交叉轴的起点对齐。
    flex-end: 交叉轴的终点对齐。
    center: 交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
    flex-start 效果图
    在这里插入图片描述
    flex-end 效果图
    在这里插入图片描述
    center效果图
    在这里插入图片描述

    flex-wrap属性

    默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
    值:nowrap、wrap、wrap-reverse(换行,第一行在下方)

    flex-flow属性

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

    以上这些就是flex的基本常用的一些属性布局,能完成大多的常用布局,如需要复杂的布局,还可以深入学习下。

    展开全文
  • Flex 弹性盒子布局

    千次阅读 2018-06-01 22:48:51
    CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种用于在页面上布置元素的布局模式,使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素可预测地运行。它不使用浮动,flex容器的边缘也不会与其内容的边缘...
  • 快速掌握flex弹性盒子布局

    千次阅读 多人点赞 2020-06-12 15:28:38
    flex弹性盒子布局前言详解flex布局写一个简单flex布局的步骤1、设置flex容器(弹性盒子)2、设置项目的大小比例(1)默认占满整行的写法(项目使用flex-grow属性)(3)默认最多占满整行的写法(项目使用width属性)...
  • Flex布局(弹性盒子布局

    千次阅读 2019-04-02 22:12:14
    元素表现为 flex 框时,它们沿着两个轴来布局: **主轴(main axis)**是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为 main start 和 main end。 **交叉轴(cross...
  • CSS弹性盒子布局flex

    2019-10-17 21:43:12
    flex布局flex布局是继标准流布局、浮动布局、定位布局后的第四种布局方式。这种方式可以非常优雅的实现子元素居中或均匀分布,甚至可以随着窗口缩放自动适应。flex布局在浏览器中存在一定的兼容性(具体参考:...
  • 弹性盒子布局(flex布局) 弹性盒子布局方式: .box{ display:flex; } @设为Flex布局后,子元素的float、clear和vertical-align属性将失效 @采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它...
  • flex弹性盒子布局

    千次阅读 2018-06-22 19:20:28
    它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现.flex(flexble box:弹性布局盒模型),是2009年w3c提出的一种可以简洁,快速弹性布局属性。W3C提出了一种新的方案----Flex布局,可以简便、...
  • css弹性盒子 | flex布局讲解 | 实例

    千次阅读 2018-10-07 18:53:03
    今天介绍常见布局Flex写法。 你会看到,不管是什么布局Flex往往都可以几行命令搞定。 我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by ...
  • 《CSS弹性盒子布局——flex布局的基本概念》 Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性,更多的...
  • Flex弹性盒子布局详解

    2021-05-06 16:48:17
    Flex弹性盒子布局详解 目录 Flex弹性盒子布局详解 1、什么是 flex 布局 2、基本概念 3、容器的属性 4、项目的属性 1、什么是 flex 布局 Flex 是 Flexible Box 的缩写,意为"灵活的盒子"或"弹性的盒子",...
  • 图解css3弹性布局/弹性盒子/Flex Box

    万次阅读 2020-07-24 15:37:39
    文章目录css3弹性布局弹性盒子知识点详解1.flex-direction2.justify-content3.align-items4.flex-wrap5.align-content6.align-self 弹性盒子是 CSS3 的一种新的布局模式。 废话不多哔哔,直接上干货 HTML代码 &...
  • 弹性盒子本身就是并排的,我们设置宽度即可。 用一个容器container包裹三栏,设置comtainer容器的display属性为flex,左右栏设置宽度为300px,中间栏设置flex:1,这里的1表示宽度比例,具体数值取决于其它盒子的flex...
  • 弹性盒子 昨天看了个视频,如何用加弹性布局相关css 从图左实现为右面的情况,我一时竟然没想到解决方案 你能很快想出答案吗? 看完了视频后又自己又找出了答案 父容器:justify-content: space-...
  • CSS3弹性盒子介绍 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型...弹性盒子由弹性容器(Flex container)和弹性子元素(Flex ite...
  • P89-前端基础高级布局flex-弹性盒布局导航栏练习 1.概述 我们使用新学习的布局方式来做个导航栏,弹性盒导航栏。体验下弹性盒的优点 2.弹性盒布局导航栏 2.1.未开启弹性盒代码 <!DOCTYPE html> <html>...
  • Flex 弹性盒子布局使用教程

    千次阅读 2017-01-02 18:27:02
    传统的网页布局(layout)解决方案,是基于盒模型,依赖...2009年,W3C提出了一种新的方案----Flex布局,旨在提供一个更加有效的布局方式,更好的控制项目的对齐和自由分配容器空间,即使它们的大小是未知的或动态的。
  • 面试题目:假设高度一定,请写出三栏布局,左右宽度300px,中间宽度自适应,中间栏要放在文档流前面优先渲染; 先说一下我的想法,三栏布局,三栏就是三个栏目板块放在一行,最开始我看见的是左右定宽,中间自适应,...
  • Flex弹性盒子布局实现骰子6点

    千次阅读 2019-09-28 11:24:29
    1、基础样式 h2{ text-align: center; } .main{ display: flex; flex-wrap: wrap; width: 680px; justify-content: space-between; } .container{ display: flex; width: 320px; heigh...
  • 先粘贴上一段代码,flex总体布局 第一个 第二个 第三个 css样式*{ margin:0; padding: 0; } .one{ background: #f00; } .two{ background: #0f0; height: 30px; }
  • 小程序学习:弹性盒子flex布局

    千次阅读 2019-05-22 19:41:44
    2009年,W3C提出了一种新的方案——Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 flex容器有6个属性: flex-direction f....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,241
精华内容 4,496
关键字:

弹性盒子布局flex