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

    2019-10-24 21:21:54
    弹性盒子布局 简单介绍一下弹性盒子布局:父级盒子可以有多个子盒子,弹性盒子只定义了子元素如何布局,不影响盒子内外的渲染;在父级定义该父级为弹性盒子,父级内的子级盒子全在一行显示,影响只是布局,见代码...

    弹性盒子布局

     

    简单介绍一下弹性盒子布局:父级盒子可以有多个子盒子,弹性盒子只定义了子元素如何布局,不影响盒子内外的渲染;在父级定义该父级为弹性盒子,父级内的子级盒子全在一行显示,影响只是布局,见代码:

     

    
     
    1. *{

    2. margin: 0;

    3. padding: 0;

    4. }

    5. .big{

    6. display: flex;

    7. }

    8. .big>div{

    9. width: 200px;

    10. height: 100px;

    11. background: red;

    12. }

    13. </style>

    14. </head>

    15. <body>

    16. <div class="big">

    17. <div>列1</div>

    18. <div>列2</div>

    19. <div>列3</div>

    20. <div>列4</div>

    21. <div>列5</div>

    22. <div>列6</div>

    23. </div>

    简单的定义为弹性盒子;上面代码默认是从左到右进行排列;

     

    也可以修改从右到左排列;只要设置direction:rtl页面布局也就跟着变;

     

    
     
    1. .big{

    2. display: flex;

    3. direction: rtl;

    4. }

    请欣赏页面布局的效果:

     


     

    flex-direction属性:顺序指定了弹性子元素在父容器中的位置;

     

    flex-direction: row | row-reverse | column | column-reverse

     

    flex-direction的值有:

    • row:横向从左到右排列(左对齐),默认的排列方式。
    • row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。{反序排列;}
    • column:纵向排列。
    • column-reverse:反转纵向排列,从后往前排,最后一项排在最上面{反向纵向排列}
    
     
    1. .big{

    2. display: flex;

    3. flex-direction: row-reverse;

    4. }//产生的效果与diretion相同;


    反向纵向排列:

     

    
     
    1. .big{

    2. display: flex;

    3. flex-direction: column-reverse;

    4. }

    看效果图:

     

     

    justify-content 属性

     

    内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。

    justify-content 语法如下:

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

    各个值解析:

    • flex-start:(默认值)

      弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放。

    •   
    • flex-end:

      弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平齐摆放。

    • 
       
      1. .big{

      2. display: flex;

      3. justify-content: flex-end;

      4. width: 1300px;

      5. height: 300px;

      6. border: 1px solid gray;

      7. margin: auto;

      8. }

      9. .big>div{

      10. width: 200px;

      11. height: 100px;

      12. background: red;

      13. }

      14. </style>

      15. </head>

      16. <body>

      17. <div class="big">

      18. <div>列1</div>

      19. <div>列2</div>

      20. <div>列3</div>

      21. <div>列4</div>

      22. <div>列5</div>

      23. <div>列6</div>

      24. </div>

      效果图:(向右对齐)
       
    • center:(居中)

      弹性项目居中紧挨着填充。(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)。

    • 
       
      1. .big{

      2. display: flex;

      3. justify-content: center;

      4. width: 1300px;

      5. height: 300px;

      6. border: 1px solid gray;

      7. margin: auto;

      8. }


       
    • space-between:(平均分配空隙)

      弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项,则该值等同于flex-start。否则,第1个弹性项的外边距和行的main-start边线对齐,而最后1个弹性项的外边距和行的main-end边线对齐,然后剩余的弹性项分布在该行上,相邻项目的间隔相等。

    • 
       
      1. .big{

      2. display: flex;

      3. justify-content: space-between;

      4. width: 1300px;

      5. height: 300px;

      6. border: 1px solid gray;

      7. margin: auto;

      8. }


       
    • space-around:

      弹性项目平均分布在该行上,两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项,则该值等同于center。否则,弹性项目沿该行分布,且彼此间隔相等(比如是20px),同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px)。

      
       
      1. .big{

      2. display: flex;

      3. justify-content: space-around;

      4. width: 1300px;

      5. height: 300px;

      6. border: 1px solid gray;

      7. margin: auto;

      8. }


      效果图:

       

    align-items 属性

    align-items 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

    语法

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

    各个值解析:

    • flex-start(靠着起始边界):弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
    • flex-end(靠着终边界):弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
    • 
       
      1. .big{

      2. display: flex;

      3.  
      4. align-items: flex-end;

      5. width: 1300px;

      6. height: 300px;

      7. border: 1px solid gray;

      8. margin: auto;

      9. }

    • center(盒子居中):弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
    •  
    • baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
    •  
    • stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。

    flex-wrap 属性

    flex-wrap 属性用于指定弹性盒子的子元素换行方式。

    语法

    flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

    各个值解析:

    • nowrap - 默认,弹性容器为单行。该情况下弹性子项可能会溢出容器。
    • wrap (多出来的就换行)- 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行
    • wrap-reverse (多出来的反向换行)-反转 wrap 排列。
    
     
    1. .big{

    2. display: flex;

    3. flex-wrap:wrap-reverse;

    4. width: 1100px;

    5. height: 300px;

    6. border: 1px solid gray;

    7. margin: auto;

    8. }

    效果图:

     

    align-content 属性

     

    align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。

    语法

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

    各个值解析:

    • stretch - 默认。各行将会伸展以占用剩余的空间。
    • flex-start - 各行向弹性盒容器的起始位置堆叠。
    • 
       
      1. .big{ display: flex;

      2. align-content:flex-start ;

      3. flex-wrap: wrap;

      4. width: 1000px;

      5. height: 300px;

      6. border: 1px solid gray;

      7. margin: auto;

      8. }


    • flex-end - 各行向弹性盒容器的结束位置堆叠。
    • center -各行向弹性盒容器的中间位置堆叠。
    • space-between -各行在弹性盒容器中平均分布。
    • space-around - 各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。

       

    弹性子元素属性

    排序(子元素盒子排序)

    语法

    order: 

     

    各个值解析:

    • <integer>:用整数值来定义排列顺序,数值小的排在前面。可以为负值。

    order 属性设置弹性容器内弹性子元素的属性:

     

     

    对齐

     

    设置"margin"值为"auto"值,自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto",可以使弹性子元素在弹性容器的两上轴方向都完全集中。

     

    
     
    1. .big{

    2. display: flex;

    3.  
    4. width: 1300px;

    5. height: 300px;

    6. border: 1px solid gray;

    7. margin: auto;

    8. }

    9. .big>div{

    10. width: 200px;

    11. height: 100px;

    12. background: red;

    13.  
    14. }

    15. .big>div:first-child{

    16.  
    17. margin-right: auto;

    18. }

    19. .big>div:last-child{

    20.  
    21. margin-right: auto;

    22. }


     

    弹性盒子居中:有关于盒子居中问题,下章重点介绍;

    
     
    1.  
    2. .big{

    3.                 display: flex;

    4.                 

    5.                 width: 1300px;

    6.                 height: 300px;

    7.                 border: 1px solid gray;

    8.                 margin: auto;

    9.             }

    10.  
    11. .big>div{

    12. width: 200px;

    13. height: 100px;

    14. background: red;

    15.  
    16. }

    17. .big>div:first-child{

    18.  
    19. margin: auto;

    20. }

    展开全文
  • 弹性盒布局

    2019-09-13 16:22:01
    使用自适应窗口的弹性盒布局 ordinal-group 如何才能让DIV的宽度跟随浏览器窗口变化而变换?在CSS3中我们只要使用一个box-flex属性,使得我们的盒布局变成弹性盒布局就可以了。 兼容性写法: -webkit-box-...
    • 使用自适应窗口的弹性盒布局 ordinal-group

    如何才能让DIV的宽度跟随浏览器窗口变化而变换?在CSS3中我们只要使用一个box-flex属性,使得我们的盒布局变成弹性盒布局就可以了。

    兼容性写法:

            -webkit-box-ordinal-group (Safari浏览器、Chrome浏览器时前面加-webkit-)

            -moz-box-ordinal-group (Firefox浏览器时前面加-)

    • 改变元素的排列方向 box-orient

    在使用弹性盒布局的时候,可以通过box-orient来指定多个元素排列方向。

    值:

            horizontal 在水平中从左向右排列子元素。

             vertical从上向下垂直排列子元素。

    兼容性写法:

            -webkit-box-orient:vertical

            -moz-box-orient:vertical

    • 元素的宽度与高度自适应

    在使用盒布局的时候,元素的宽度与高度具有,就是元素的宽度与高度可以根据排列方向的改变而改变。

    • 使用弹性盒布局来消除空白  box-flex

    方法就是给予DIV中加入一个box-flex属性

    • 对多个元素使用box-flex属性

    让浏览器或容器中的元素的总宽度或者总高度都等于浏览器或者是容器的高度。

    方法是对多个元素使用box-flex属性。

    • 指定水平方向与垂直方向的对齐方法

    使用盒布局的时候,可以使用box-pack属性及box-align属性来指定元素中的文字、图像及子元素的水平方向或者垂直方向上的对齐方式

    兼容性写法:

            -webkit-box-pack:值(Safari浏览器、Chrome浏览器时前面加-webkit-)

            -moz-box-pack:值(Firefox浏览器时前面加-moz-)

            -webkit-box-align:值(Safari浏览器、Chrome浏览器时前面加-webkit-)

            -moz-box-align:值(Firefox浏览器时前面加-moz-)

    属性值 box-pack属性值的含义 box-align
    start 左对齐,文字、图像或子元素被放置在元素最左边 顶部对齐,文字、图像或子元素被放置在元素最顶部
    center 中对齐,文字、图像或子元素被放置在元素中部 中部对齐
    end 右对齐 底部对齐
    • 指定水平方向与垂直放心的对齐方式

    转载于:https://my.oschina.net/u/2672206/blog/707822

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

    2020-11-08 22:44:04
    flex弹性盒子布局实例,本次博客实例需要的一些资源,源代码,可自行下载研究,一起进步,共勉,一起加油
  • 在线演示使用自适应窗口的弹性盒布局如果我们想让这三个div的总宽度等于浏览器窗口的宽度,而且能够随着窗口宽度的改变而改变。那么我们使用盒布局,并且只要使用一个box-flex属性,使盒布局变成弹性盒布局就可以了...

    在线演示

    使用自适应窗口的弹性盒布局

    如果我们想让这三个div的总宽度等于浏览器窗口的宽度,而且能够随着窗口宽度的改变而改变。那么我们使用盒布局,并且只要使用一个box-flex属性,使盒布局变成弹性盒布局就可以了。

    兼容:在Firefox中使用“-moz-box-flex”的形式;在Safari、Chrome中使用“-webkit-box-flex”的形式;

    这里写图片描述

    html:

    <body>
      <div id="container">
        <div id="left">
          <h2>左侧边栏</h2>
          <ul>
            <li><a href="#">超链接</a></li>
            <li><a href="#">超链接</a></li>
            <li><a href="#">超链接</a></li>
            <li><a href="#">超链接</a></li>
            <li><a href="#">超链接</a></li>
          </ul>
        </div>
        <div id="center">
          <h2>内容</h2>
          <p>我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容</p>
        </div>
        <div id="right">
          <h2>右侧边栏</h2>
          <ul>
            <li><a href="#">超链接</a></li>
            <li><a href="#">超链接</a></li>
            <li><a href="#">超链接</a></li>
          </ul>
        </div>
      </div>
    </body>

    css:

    <style>
        * {margin: 0;padding: 0;} /*去除默认样式,实战中不建议这么写*/
    
        #container {  /*把盒布局变成弹性盒布局*/
          display: -moz-box; /* 兼容Firefox */
          display: -webkit-box; /* 兼容Chrome、Safari */
        }
        #left {
          width: 200px;/*左边div宽度固定*/
          padding: 20px;
          background-color: orange;
        }
        #center {
          -moz-box-flex: 1; /*中间div宽度自适应屏幕 兼容Firefox*/
          -webkit-box-flex: 1;/*中间div宽度自适应屏幕 兼容Chrome、Safari*/
    
          padding: 20px;
          background-color: yellow;
        }
        #right {
          width: 200px; /*右边div宽度固定*/
          padding: 20px;
          background-color: limegreen;
        }
        #left,#center,#right {
          box-sizing:border-box; /* 兼容IE、Opera 以及 Chrome */
          -moz-box-sizing: border-box; /* 兼容Firefox */
          -webkit-box-sizing: border-box;/* 兼容Safari */
        }
    </style>

    解析:border-box:规定并排的盒子带边框的框;
    例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

    border-box是为元素设定的宽度和高度决定了元素的边框盒。
    就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
    通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

    展开全文
  • Flex弹性盒布局

    2019-06-04 10:18:13
    Flex弹性盒布局 本章目标 会使用flex实现页面布局 会使用容器属性 会使用项目属性 能够解决flex布局中遇到的问题 思考: 为什么出现flex弹性盒布局 分析: 垂直居中并不容易实现 Flex定义 flex是...

    Flex弹性盒布局

    本章目标

    会使用flex实现页面布局

        会使用容器属性

        会使用项目属性

    能够解决flex布局中遇到的问题


    思考:
        为什么出现flex弹性盒布局

    分析:
        垂直居中并不容易实现


    Flex定义

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

    弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成

    弹性容器通过设置display 属性的值为flex 或 inline-flex 将其定义为弹性容器

    弹性容器包含了一个或多个弹性子元素

    注意:
    弹性容器外以及弹性子元素内是正常渲染的,弹性盒子只定义了弹性子元素如何在弹性容器内布局。

    弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。


    作用:
        
        它能够更加高效方便的控制元素的对齐/排列

        可以自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的

        控制元素在页面的布局方向

        按照不同DOM所指定排序方式对屏幕上的元素重新排序

    布局方式分类

        行内级/块级布局

        表格布局

        浮动/定位布局

        Flex布局

        网格矩阵形式的布局


    应用场景 

    使用在现代浏览器中

    有一定宽容度要求的设计中

        相对 
            宽容度要求较高

        绝对

            宽容度较低,100%还原设计稿

    示例:以下元素展示弹性子元素在一行内显示,从左到右

    示例:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .flex-container {
        display: -webkit-flex;
        display: flex;
        width: 400px;
        height: 250px;
        background-color: lightgrey;
    }
     
    .flex-item {
        background-color: cornflowerblue;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
    </style>
    </head>
    <body>
     
    <div class="flex-container">
      <div class="flex-item">flex item 1</div>
      <div class="flex-item">flex item 2</div>
      <div class="flex-item">flex item 3</div> 
    </div>
     
    </body>
    </html>

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

    2020-10-26 10:21:26
    Flexiable Box即是弹性盒,用来进行弹性布局,一般跟rem(rem伸缩布局(转))连起来用比较方便,flexbox负责处理页面布局,然后rem处理一些flex顾及不到的地方(rem伸缩布局主要处理尺寸的适配问题),布局还是要...
  • 弹性盒布局 父元素:display:flex; flex-direction 改变主轴的方向 默认主轴为水平方向 默认为row column 垂直方向 row-reverse 让主轴上的子元素反转排列 colum-...
  • css flex 弹性盒布局

    2020-08-27 13:59:31
    css flex 弹性盒布局: 1、css弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、...
  • 弹性盒子布局(flex布局) 弹性盒子布局方式: .box{ display:flex; } @设为Flex布局后,子元素的float、clear和vertical-align属性将失效 @采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它...
  • CSS弹性盒子布局

    2020-02-07 14:14:05
    CSS弹性盒子布局案例:方法:改变样式: 案例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹性盒子</title> <style> .father{ d...
  • Flex弹性盒子布局

    2019-04-18 15:16:00
    Flex弹性盒子布局 转载于:https://www.cnblogs.com/dirks/articles/10729780.html
  • 弹性盒布局、Rem 布局、百分比布局 转载于:https://www.cnblogs.com/tremendous/p/10839395.html
  • /*弹性垂直水平居中*/ .flex-vertical-center{ display: flex;align-items: center; } /*弹性垂直对齐元素开始位置*/ .flex-vertical-start{ display: flex;align-items: flex-start; } /*弹性盒子水平居中*/ ....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,462
精华内容 1,784
关键字:

弹性盒布局