flexbox_flexbox布局 - CSDN
精华内容
参与话题
  • Flexbox通常能让我们更好的操作它的子元素布局: 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行。 可以快速让他们布局在一列。 可以方便让他们对齐容器的左、右、中间等。 ...

    一、Flex布局是什么?

    Flex是Flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。
    任何一个容器都可以指定为Flex布局。
    Flexbox通常能让我们更好的操作它的子元素布局:

    • 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行。
    • 可以快速让他们布局在一列。
    • 可以方便让他们对齐容器的左、右、中间等。
    • 无需修改结构就可以改变他们的显示顺序。
    • 如果元素容器设置百分比和视窗大小改变,不用担心未指定元素的确切宽度而破坏布局,因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。

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

    二、基本概念

    采用Flex布局的元素,称为Flex容器,简称“容器”。它的所有子元素自动成为容器成员,称为Flex项目,简称“项目”。
    在这里插入图片描述

    三、容器的属性

    以下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;
    }
    在这里插入图片描述

    上图是分别对flex-direction设置以上四个属性值得效果。

    3.2 flex-wrap属性

    .box{
    flex-wrap:nowrap | wrap | wrap-reverse
    }

    三个值分别表示:
    (1)nowrap(默认) :不换行
    (2)wrap:换行,第一行在上方
    (3)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;
    }

    3.5 align-items属性

    align-item属性定义项目在交叉轴上如何对齐。

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

    3.6 align-content属性

    align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

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

    四、项目的属性

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

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

    4.1 order属性

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

    item {
    order:0;
    }

    4.2 flex-grow属性

    flex-grow属性定义项目的放大比例,默认为0.

    	  .outer{
    			display: flex;
    		}
    		.outer div{
    			width: 100px;
    			height: 100px;
    			background-color: red;
    			margin-left: 20px;
    		}
    		.outer div:nth-child(1){
    			flex-grow:1;
    		}
    		.outer div:nth-child(2){
    			flex-grow:2;
    		}
    		.outer div:nth-child(3){
    			flex-grow:3;
    		}
    		.outer div:nth-child(4){
    			flex-grow:4;
    		}
    

    在这里插入图片描述
    如上图所示,我们把四个div的flex-grow属性分别设为1,2,3,4,那么他们等于把整个宽度分为10份,分别占1/10、2/10、3/10、4/10。

    4.3 flex-shrink属性

    flex-shrink定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

    	.outer{
    			display: flex;
    		}
    		.outer div{
    			width: 300px;
    			height: 100px;
    			background-color: red;
    			margin-left: 20px;
    		}
    		.outer div:nth-child(1){
    			flex-shrink:1;
    		}
    		.outer div:nth-child(2){
    			flex-shrink:2;
    		}
    		.outer div:nth-child(3){
    			flex-shrink:2;
    		}
    		.outer div:nth-child(4){
    			flex-shrink:1;
    		}
    

    在这里插入图片描述
    由上图可知,当空间不足时,flex-shrink属性值大的缩小。

    4.4 flex-basis属性

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

    item {
    	flex-basis:length | auto;
    }
    

    4.5 flex属性

    flex属性是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto。
    该属性有两个快捷值:auto(1 1 auto)和none(0 0 auto)。

    4.6 align-self属性

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

    item {
    	align-self:auto | flex-start | flex-end  |  center  | baseline  |  stretch;
    }
    
    展开全文
  • Flexbox

    2019-07-11 20:56:13
    概述 CSS Flexible Box Layout(css 弹性盒子布局)是css的模块之一,定义了一种针对用户界面设计而优化的CSS盒子模型。在弹性布局模型中,弹性容器的子元素不仅可以在任何方向排布,还可以"flex"其尺寸。...

    概述

    CSS Flexible Box Layout(css 弹性盒子布局)是css的模块之一,定义了一种针对用户界面设计而优化的CSS盒子模型。在弹性布局模型中,弹性容器的子元素不仅可以在任何方向排布,还可以"flex"其尺寸。

    css2.1中定义了4中布局模式,分别是block layout、inline layout、table layout、positioned layout。块级布局侧重于垂直方向、行内布局侧重于水平方向,flex layout是与方向无关的。块级布局对于单独一个页面来说是行之有效的,但其仍缺乏足够的定义来支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。flex layout 是一种新的布局模式,可用于布置更复杂的应用程序和网页。

    使用flexbox的准备工作

    使用flexbox 前需要了解一些flex layout的一些词汇。

    弹性容器(Flex container):包含着弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。

    弹性项目(Flex item):弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。

    轴(Axis):每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
    flex轴

    弹性容器的主轴和侧轴取决于flex-direction的属性。下面会进行介绍。

    开始使用Flexbox

    display值为 flex 使弹性容器成为块级元素;display值为 inline-flex 使弹性容器成为单个不可分的行内级元素。例如,对ul使用display: flex,则ul变为flex容器,li变为flex项目。
    使用flexbox
    flex就这样就初始完成,接下来要使用 flex容器属性 进行一些操作了。

    flex 容器的属性有

    flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

    fle-direction控制着主轴在容器中的方向;值为:row || row-reverse || column || column-reverse;

    flex-wrap: 控制flex容器内的flex item是在一行还是多行排列。值为:wrap || nowrap || wrap-reverse;例子如下:

    flex-wrap

    flex-flow: 是flex-direction 和flex-wrap的简写;

    justify-content: 控制主轴上所有flex item 的对齐;例子和值如下:
    justify-content

    align-items: 控制 flex项目 在Cross-Axis上对齐方式。例子和值如下:
    align-items

    align-content: 控制flex item 在 flex 容器的Cross-Axis之间的空间分配。类似于justify-content对齐主轴的方式。注意:align-content对只有一行的 flex 容器不起作用。
    align-content
    align-content和align-items的区别:如果在flex容器中使用wrap,那可能会出现折行,若想控制每行之间空间分配,则使用align-content.

    flex 项目属性

    flex-grow || flex-shrink || flex-basis

    flex-grow属性定义flex item 的拉伸因子。值为非负数数值,默认值为 零(0).

    flex-shrink属性定义flex item的收缩因子。值为非负数数值,默认值为1。

    flex-basis属性指定flex元素在主轴方向上的初始大小。值类似于width和height的值,默认为auto(content)。

    理解拉伸和收缩前,需要知道positive free space和negative free space的概念。flex子元素没有positive free space 就不会增长, 没有negative free space 就不会缩小.例如,我们有一个500px宽的容器,flex-direction属性为row,容器中有三个100px的flex item,此时整个容器还有500 - 100 * 3= 200px的positive free space。
    positive free space

    还是500px的flex容器,flex-direction属性为row,容器中有三个200px的flex item,此时flex 容器就有了500 - 200*3 = -100px的 negative free space。
    negative free space

    flex-grow

    当一个flex 容器有positive free space时,此时说明容器有空间用于flex item。如果我们想让positive free space填充flex item,需要使用flex-grow来控制分配positive free space的比例。例如,给每一个flex item的flex-grow设置为1,则每份flex item分配的positive free space空间为12001/(1+1+1);若更改其中一个flex-grow为2,其它值为1,则设置为2的分配空间为2200 1/(1+2+1)。设置flex-grow的值为n单位 positive free space。

    flex-shrink

    当一个flex容器有negative free space时,此时说明容器需要减少flex item的空间让flex item不溢出flex容器。方式和flex-grow相似(但不相同),不再赘述。这个缩小因素和flex-basis的有一定关系,例如:
    negative free space1
    negative free space2

    当flex item到min-content的大小时,随着空间的进一步缩小,空间是从第三个flex item中进行移除的。设置为1,不代表都会缩小。

    flex-basis

    flex-basse的默认值是auto。flex有几点需要注意:

    • 如果flex-basis设置为auto,同时item已设置有width,此时宽度会基于 width。
    • 如果flex-basis设置为auto 或 content,此时大小会基于item 大小。
    • 如果flex-basis的值为非零且有长度单位(类似于width或heigh的值),此时的值为item的大小。
    • .如果flex-basis的值为0,则计算分配空间时不考虑flex item的大小。

    flex 简写

    flex是flex-grow、flex-shrink和flex-basis三个属性的简写。flex值可以为 auto、initial、none或.

    auto时值为: 1 1 auto;

    initial时值为 0 1 auto;

    none时值为0 0 auto;

    positive-number指的是非以上三值,值可以为一个(单值语法)、两个(双值语法)、三个(三值语法)。一个值时:一个无单位数会被当做flex-grow;一个有单位值(有效宽度)会被当做flex-basis的值。两个值时:第一个值必须为一个无单位数,会被当做flex-grow的值;第二个值若是一个无单位数会被当作flex-shrink,有单位值(有效宽度)会被当作flex-basis的值。

    当简写时需要注意,flex-grow的缺省值为 1,flex-shrink的缺省值为1,flex-basis的缺省值为0。

    参考

    转载于:https://www.cnblogs.com/anlen/p/10572266.html

    展开全文
  • Bootstrap4之弹性盒子详解(flexbox

    万次阅读 2018-06-21 10:42:55
    个人认为:弹性盒子是Bootstrap中比较重要同时理解也比较困难的一部分,接下来,我就根据自己的理解详细讲述一下对于弹性盒子的看法。1.排序方式2.响应式布局...

    个人认为:弹性盒子是Bootstrap中比较重要同时理解也比较困难的一部分,接下来,我就根据自己的理解详细讲述一下对于弹性盒子的看法。

    1 排序方式

    1.1 水平排列

    相关说明:弹性布局之后可以使元素水平排列,类似浮动效果。


    主要代码:

    <div class="container mt-3">
      <h2>水平方向</h2>
      <p>使用 .flex-row 类设置弹性子元素水平显示:</p>
      <div class="d-flex flex-row bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
      </div>
      <p>.flex-row-reverse 设置右对齐方向:</p>
      <div class="d-flex flex-row-reverse bg-secondary">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
      </div>
    </div>

    1.2 垂直排列

    相关说明:弹性布局之后可以使元素垂直排列,类似设置行高效果,但是比行高的效果种类多。


    主要代码:

    <div class="container mt-3">
      <h2>垂直方向</h2>
      <p>.flex-column 类用于设置弹性子元素垂直方向显示:</p>
      <div class="d-flex flex-column mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
      </div>
      <p>.flex-column-reverse 类用于设置弹性子元素垂直方向翻转显示:</p>
      <div class="d-flex flex-column-reverse">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
      </div>
    </div>

    1.3 内容排列

    相关说明:内容排列可以设置弹性盒子内子元素的位置,justify-content-* 类用于修改弹性子元素的排列方式,* 号允许的值有:start (默认), end, center, between 和 around。


    主要代码:

    <div class="container mt-3">
      <h2>内容排列方式</h2>
      <div class="d-flex justify-content-start bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
      </div>
      <div class="d-flex justify-content-end bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
      </div>
      <div class="d-flex justify-content-center bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
      </div>
      <div class="d-flex justify-content-between bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
      </div>
      <div class="d-flex justify-content-around bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
      </div>
    </div>

    1.4 权重排列

    相关说明:.order 类可以设置弹性子元素的排序,从 .order-1 到 .order-12,数字越低权重越高。


    主要代码:

    <div class="container mt-3">
      <h2>排序</h2>
      <div class="d-flex mb-3">
        <div class="p-2 order-3 bg-info">Flex item 1</div>
        <div class="p-2 order-2 bg-warning">Flex item 2</div>
        <div class="p-2 order-1 bg-primary">Flex item 3</div>
      </div>
    </div>

    1.5 边距排列

    相关说明:.mr-auto 类可以设置子元素右外边距为 auto,即 margin-right: auto!important;.ml-auto 类可以设置子元素左外边距为 auto,即 margin-left: auto!important。在有的场景中,.mr-auto可以替代.justify-content-between的效果。


    主要代码:

    <div class="container mt-3">
      <h2>外边距</h2>
      <p>.mr-auto 类可以设置子元素右外边距为 auto,.ml-auto 类可以设置子元素左外边距为 auto,</p>
      <div class="d-flex mb-3 bg-secondary">
        <div class="p-2 mr-auto bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
      </div>
      <div class="d-flex mb-3 bg-secondary">
        <div class="p-2  bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 ml-auto bg-primary">Flex item 3</div>
      </div>
    </div>

    1.6 换行排列

    相关说明:弹性容器中包裹弹性子元素可以使用以下三个类: .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。

    主要代码:
    <div class="container mt-3">
      <h2>包裹</h2>
      <p><code>.flex-wrap:</code></p>
      <div class="d-flex flex-wrap bg-light">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
      </div>
      <br>
      <p><code>.flex-wrap-reverse:</code></p>
      <div class="d-flex flex-wrap-reverse bg-light">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
        
      </div>
      <br>
      <p><code>.flex-nowrap:</code></p>
      <div class="d-flex flex-nowrap bg-light">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
       
      </div>
      <br>
    </div>

    1.7 .flex-grow-1

    相关说明:.flex-grow-1用于设置子元素使用剩下的空间。


    主要代码:

    <div class="container mt-3">
      <h2>扩展</h2>
      <p>.flex-grow-1 用于设置子元素使用剩下的空间:</p>
      <div class="d-flex mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 flex-grow-1 bg-primary">Flex item 3</div>
      </div>
      <p>不使用 .flex-grow-1 实例:</p>
      <div class="d-flex mb-3 bg-secondary">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
      </div>
    </div>

    1.8 内容对齐

    相关说明:我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素,包含的值有:.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。
    这些类在只有一行的弹性子元素中是无效的。

    主要代码:

    <div class="container mt-3">
      <h2>内容对齐</h2>
      <p>.align-content-start:</p>
      <div class="d-flex flex-wrap align-content-start bg-danger" style="height:100px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
      </div>
      <br>
      <p>.align-content-end:</p>
      <div class="d-flex flex-wrap align-content-end bg-danger" style="height:100px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
      </div>
      <br>
      <p>.align-content-center:</p>
      <div class="d-flex flex-wrap align-content-center bg-danger" style="height:100px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
      </div>
      <br>
      <p>.align-content-around:</p>
      <div class="d-flex flex-wrap align-content-around bg-danger" style="height:100px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
      </div>
      <br>
      <p>.align-content-stretch:</p>
      <div class="d-flex flex-wrap align-content-stretch bg-danger" style="height:100px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
      </div>

    1.9 子元素对齐

    相关说明:如果要设置单行的子元素对齐可以使用 .align-content-* 类来控制。

    主要代码:
    <div class="container mt-3">
      <h2>子元素对齐</h2>
      <p style="padding:0px;margin:0px;">.align-items-start:</p>
      <div class="d-flex align-items-start bg-danger" style="height:100px;">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
      </div>
      <br>
      <p style="padding:0px;margin:0px;">.align-items-end:</p>
      <div class="d-flex align-items-end bg-danger" style="height:100px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
      </div>
      <br>
      <p style="padding:0px;margin:0px;">.align-items-center:</p>
      <div class="d-flex align-items-center bg-danger" style="height:100px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
      </div>
      <br>
      <p style="padding:0px;margin:0px;">.align-items-baseline:</p>
      <div class="d-flex align-items-baseline bg-danger" style="height:100px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
      </div>
      <br>
      <p style="padding:0px;margin:0px;">.align-items-stretch (默认):</p>
      <div class="d-flex align-items-stretch bg-danger" style="height:100px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
      </div>
      <br>
    </div>
    </div>

    1.10 指定子元素对齐

    相关说明:如果要设置指定子元素对齐可以使用 .align-self-* 类来控制,包含的值有:.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)。


    主要代码:
    <h2>Align Self</h2>
      <p>.align-self-start:</p>
      <div class="d-flex bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border align-self-start">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
      </div>
      <br>
      <p>.align-self-end:</p>
      <div class="d-flex bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border align-self-end">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
      </div>
      <br>
      <p>.align-self-center:</p>
      <div class="d-flex bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border align-self-center">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
      </div>
      <br>
      <p>.align-self-baseline:</p>
      <div class="d-flex bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border align-self-baseline">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
      </div>
      <br>
      <p>.align-self-stretch (默认):</p>
      <div class="d-flex bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border align-self-stretch">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
      </div>
      <br>
    </div>

    2 响应式布局

    2.1 总的来说

    响应式布局主要是在弹性盒子的基础上添加屏幕大小属性,.d-*-flex根据不同的屏幕设备创建弹性盒子容器,*号的值有:sm, md, lg 或 xl, 对应的是小型设备、中型设备,大型设备,超大型设备。

    2.2 网格系统

    弹性盒子一般会配合网格系统在项目使用。网格系统会将会将规定区域铺满,当遇到规定区域一部分使用网格系统布局一部分使用宽高布局的情况时需要.flex-grow-1类来进行设置。

    2.3 弹性盒子边距

    当弹性盒子铺满规定区域时,一旦为弹性子元素设置margin值就会打乱布局。解决这一问题,可以为弹性子元素套一个div进行替代,div内设置padding值撑开即可。
    展开全文
  • Flex布局 Flexbox属性详解

    千次阅读 2017-11-09 17:19:54
    原文:A Visual Guide to CSS3 Flexbox Properties Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐、方向、顺序,甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要...

    原文:A Visual Guide to CSS3 Flexbox Properties

    Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐、方向、顺序,甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间 。

    很多的设计师和开发者发现Flex布局很容易使用,它定位元素简单因此很多复杂的布局能够用很少的代码实现,引领更简单的开发过程。Flex布局的算法是基于方向的,不同于基于水平或者垂直的block和inline布局,这种Flex布局可以被用在小的应用组件中,而CSS3 网格布局模型是新兴处理大规模的布局。

    本文主要讲解flex的每个属性怎样栩栩如生的影响布局。

    1、基本概念:


    在开始描述Flexbox属性之前,我们先小小的介绍一下Flexbox模型,Flex布局由父容器称为Flex容器(flex-container)和它直接的子元素称为flex 项目(flex-item)
    构成,在下文中将它们简称为“容器”和“项目”

    flexbox的模型

    在上图中你可以看到用来描述Flex容器和它的子元素的属性和术语,你可以阅读W3C的官方文档来了解他们的意思。

    • flex容器有两个参考的轴:水平的主轴(main axis)和交叉的轴(cross axis)。
    • 主轴的开始位置main start,主轴结束位置main end;
    • 交叉轴的开始位置叫做cross start,结束位置叫做cross end;
    • 直接子元素“项目”沿主轴排列;
    • 单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

    Flexbox是2009年W3C提出的新布局方案,这里用的是2014年9月的最新标准,它的最新的浏览器支持情况

    • Chrome 29+
    • Firefox 28+
    • Internet Explorer 11+
    • Opera 17+
    • Safari 6.1+ (prefixed with -webkit-)
    • Android 4.4+
    • iOS 7.1+ (prefixed with -webkit-)

    2、用法:

    使用flex布局首先在HTML中的父元素上设置display属性:

    [html] view plain copy
    1. .flex-container {  
    2.     display: -webkit-flex; /* Safari */  
    3.     display: flex;  
    4. }  
    或者你想让它像内联元素一样,可以这样写:
    [html] view plain copy
    1. .flex-container {  
    2.   display: -webkit-inline-flex; /* Safari */  
    3.   display: inline-flex;  
    4. }  

    注意:这是唯一的要设置在父容器上的属性,所有的直接子元素会成为自动flex项目。

    3、flexbox 容器的属性:

    [css] view plain copy
    1. flex-direction:row(默认值) | row-reverse | column | column-reverse;  
    该属性指定了Flex的项目怎样在flex容器中排列,设置flex容器的主轴方向,它们(项目)两个主要的方向排列,就像一行一样水平排列或者像一列一样垂直排列。

    values:

    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-flex-direction: row; /* Safari */  
    3.   flex-direction:         row;  
    4. }  
    row 方向表明flex项目在一行中从左到右堆放在容器中。

    container_row


    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-flex-direction: row-reverse; /* Safari */  
    3.   flex-direction:         row-reverse;  
    4. }  
    row-reverse 方向表明flex项目从右到左堆放。



    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-flex-direction: column; /* Safari */  
    3.   flex-direction:         column;  
    4. }  
    column 方向指明flex项目在一列中从顶部到底部堆放



    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-flex-direction: column-reverse; /* Safari */  
    3.   flex-direction:         column-reverse;  
    4. }  

    column-reverse 方向指明flex项目在一列中从底到顶部堆放



    [css] view plain copy
    1. flex-wrap:nowrap(默认值) | wrap | wrap-reverse;  
    初始情况下,Flexbox的理念是所有的项目都排列在一条线上(轴线),flex-wrap 属性控制容器是否将它的项目排列在一行或者多行,并且控制新行堆叠的方向。

    values:

    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-flex-wrap: nowrap/* Safari */  
    3.   flex-wrap:         nowrap;  
    4. }  
    flex项目会排列在一条线上并且它们会缩放适应到容器的宽。

    container_nowarp


    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-flex-wrap: wrap; /* Safari */  
    3.   flex-wrap:         wrap;  
    4. }  

    项目(flex items)会在多行展示,如果需要的话它们可以从左到右或者从上到下排列。

    container_warp


    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-flex-wrap: wrap-reverse; /* Safari */  
    3.   flex-wrap:         wrap-reverse;  
    4. }  



    [css] view plain copy
    1. flex-flow: <flex-direction> || <flex-wrap>;  
    该属性是上面两个属性的简写方式,前一个参数设置flex-direction,后一个参数设置flex-wrap;

    values:

    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */  
    3.   flex-flow:         <flex-direction> || <flex-wrap>;  
    4. }  

    默认值: row nowarp


    [css] view plain copy
    1. justify-content:flex-start(默认值) | flex-end | center | space-between | space-around;  

    定义了项目在容器主轴上的对齐方式,当的容器中项目都是一行并且非弹性的时候或者项目是弹性的但是达到了它们的最小宽度的时候该属性可以定义容器中的剩余空间的分配。

    values:

    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-justify-content: flex-start; /* Safari */  
    3.           flex-start;  
    4. }  
    所有项目向容器的左边对齐



    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-justify-content: flex-end; /* Safari */  
    3.   justify-content:         flex-end;  
    4. }  
    所有项目向容器的右边对齐

    justify-content flex-end



    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-justify-contentcenter/* Safari */  
    3.   justify-content:         center;  
    4. }  
    所有项目在容器中居中对齐




    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-justify-content: space-between; /* Safari */  
    3.   justify-content:         space-between;  
    4. }  
    第一个和最后一个项目向容器的边界对齐,剩余的空间各个项目等分

    space-between


    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-justify-content: space-around; /* Safari */  
    3.   justify-content:         space-around;  
    4. }  
    所有的项目等分剩余的容器空间,包括第一个和最后一个项目(所以项目之间的间隔比第一个和最后一个项目与容器边框的间隔大一倍)。

    space-around



    [css] view plain copy
    1. align-items:flex-start | flex-end | center | baseline | stretch(默认值);  

    定义项目在交叉轴上的对齐方式,交叉轴与当前的轴线有关系,与justify-content很相似,只不过是垂直方向的;这属性为所有的项目设置默认的交叉轴上的对齐方式,包括匿名的。

    values:

    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-align-items: stretch; /* Safari */  
    3.   align-items:         stretch;  
    4. }  
    项目会填充容器的整个高或者宽(fill the whole height ),从容器交叉轴的起点到交叉轴的结束点。

    align-items stretch


    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-align-items: flex-start; /* Safari */  
    3.   align-items:         flex-start;  
    4. }  

    项目会堆放在容器交叉轴的起始位置(cross start )。

    flex-start


    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-align-items: flex-end; /* Safari */  
    3.   align-items:         flex-end;  
    4. }  
    项目会堆放在容器交叉轴的结束位置(cross end )。

    flex-end

    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-align-items: center/* Safari */  
    3.   align-items:         center;  
    4. }  
    项目会堆放在容器交叉轴的居中位置( center of the cross axis )



    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-align-items: baseline/* Safari */  
    3.   align-items:         baseline;  
    4. }  
    所有项目的基线会对齐

    baseline

    基线?不知道基线是什么请戳这里-->基线是什么?



    [css] view plain copy
    1. align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值);  
    当交叉轴上还有多余的空间时它定了多行的对齐方式,类似justify-content在主轴上对齐所有项目的方式一样。

    values:

    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-align-content: stretch; /* Safari */  
    3.   align-content:         stretch;  
    4. }  
    每一行的项目后面等比分配了交叉轴上的多余空间。

    align-content stretch

    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-align-content: flex-start; /* Safari */  
    3.   align-content:         flex-start;  
    4. }  
    项目在容器的交叉轴起始点上堆放在一起。

    flex-start



    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-align-content: flex-end; /* Safari */  
    3.   align-content:         flex-end;  
    4. }  
    项目在容器的交叉轴结束点上堆放在一起。

    flex-end


    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-align-contentcenter/* Safari */  
    3.   align-content:         center;  
    4. }  
    项目的行被堆放在容器的交叉轴线中间。

    center align-content


    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-align-content: space-between; /* Safari */  
    3.   align-content:         space-between;  
    4. }  
    与justify-content类似,项目的行距离在容器的交叉轴线上被等分,第一行和末尾的一行与容器的边缘对齐。

    space-between


    [css] view plain copy
    1. .flex-container {  
    2.   -webkit-align-content: space-around; /* Safari */  
    3.   align-content:         space-around;  
    4. }  
    与justify-content类似,项目的行等分了容器的交叉线上的剩余空间,第一行和最后一行同样也得到了一些,它们之间的间隔比首行和末行到容器边界的间隔大一倍。

    space-around

    注意:这个属性仅仅当容器中有多行的项目时有效,如果所有项目仅仅占一行,那这个属性对布局没有任何影响。


    4、Flexbox 项目属性

    [css] view plain copy
    1. <span style="font-size:14px; font-family: Arial, Helvetica, sans-serif;"> order: <integer></span>  
    order属性控制容器的直接子元素在容器中的顺序,默认在容器中这些项目是以该数字递增的方式排列的。

    values:

    [css] view plain copy
    1. values:  
    2. .flex-item {  
    3.   -webkit-order: <integer>; /* Safari */  
    4.   order:         <integer>;  
    5. }  
    该属性可以很简单的控制项目的顺序,而不用在HTML代码里面做调整。这个整形值可以为负数,默认值是 0。

    item order



    [css] view plain copy
    1. <span style="font-size:14px;">flex-grow: <number></span>  
    该属性指定项目的生长因素,它确定了当容器有剩余空间分配的时候相对于其他的项目当前的项目能够增加多少宽度。
    values:

    [css] view plain copy
    1. .flex-item {  
    2.   -webkit-flex-grow: <number>; /* Safari */  
    3.   flex-grow:         <number>;  
    4. }  

    flex-grew

    当所有的项目的flex-grow值相等的时候它们的size相同。

    flex-grow

    第二个项目占用了更多的剩余空间。

    默认值是:0
    注意:负数在这个属性中是没有用的



    [css] view plain copy
    1. flex-shrink: <number>  
    该属性指定了项目的收缩因素,它确定了当容器还有剩余空间收缩的时候该项目相对于其他项目的收缩多少。

    values:

    [css] view plain copy
    1. .flex-item {  
    2.   -webkit-flex-shrink: <number>; /* Safari */  
    3.   flex-shrink:         <number>;  
    4. }  

    shrik

    默认情况下,所有的项目都会收缩,但是当我们设置该属性的值为0的时候,项目会保持原有的大小。


    默认值是:1
    注意:负数在这个属性中是没有用的


    [css] view plain copy
    1. flex-basis:auto | <width>  
    该属性的值和width和height的取值一样,在 flex factors分配剩余空间之前指定项目的初始的大小。


    values:

    [css] view plain copy
    1. .flex-item {  
    2.   -webkit-flex-basis: auto | <width>; /* Safari */  
    3.   flex-basis:         auto | <width>;  
    4. }  
    flex-basis
    默认值:auto



    [css] view plain copy
    1. flex:none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]  
    该属性是flex-grow, flex-shrink 和flex-basis的缩写形式,同时属性值也有简写:auto表示(1,1,auto),none表示(0,0,auto)


    values:

    [css] view plain copy
    1. .flex-item {  
    2.   -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */  
    3.   flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];  
    4. }  

    注意: W3C鼓励使用flex的简写形式,因为flex在使用过程中会顺便初正确的重新设置没有确定的组件到常见用法。



    [css] view plain copy
    1. align-self:auto | flex-start | flex-end | center | baseline | stretch;  
    该属性和容器的align-items属性有同样的作用,它是用在单一的项目上的,可以完全压倒容器中align-items定义的对齐方式。
    values:

    [css] view plain copy
    1. .flex-item {  
    2.   -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */  
    3.   align-self:         auto | flex-start | flex-end | center | baseline | stretch;  
    4. }  
    align-self

    注意:auto 表示项目会使用父元素(容器)的align-items的值,如果该项目没有父元素的话align-self的值是stretch。

    flex items值得注意的是:float、clear、vertical-align这些属性对于项目(flex item)会失效。

    展开全文
  • 布局神器---flexbox

    千次阅读 2016-09-02 17:23:49
    1.flexboxflexbox: 是css3中的新的布局模式,可以控制未知容器元素的对齐方式、排列方向、排列顺序。 flex布局:(由父元素和它的直接子元素组成) 父元素:成为flex容器 直接子元素:成为flex项目/flex ...
  • Flexbox详解

    千次阅读 2019-07-11 10:37:13
    这篇文章介绍了Flexbox模块所有基本概念,而且是介绍Flexbox模块的很好的一篇文章,所以这篇文章非常的长,你要有所准备。&amp;lt;/p&amp;gt; 学习Flexbox的曲线 学习Flexbox可不是件很有趣的事情,因...
  • Flex Box 概念梳理

    2018-11-08 18:39:31
    之所以说 flexbox 是一种一维的布局,是因为一个 flexbox 一次只能处理一个维度上的元素布局,一行或者一列。作为对比的是另外一个二维布局CSS Grid Layout,可以同时处理行和列上的布局。 采用 Flex 布局的元素,...
  • 微信小程序—scroll-view横向滚动,设置disflex:flex不生效并警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法
  • 原文:FLEXBOX IN THE REAL WORLDflexbox 相当好用,但是现在就可以用flexbox并且让它支持到IE8吗?如果你跟着下面的步骤,现在就可以开始用flexbox啦。我介绍flexbox已经有一段时间了,别人问得最多的问题是“什么...
  • display属性flex,flexbox详解

    千次阅读 2019-01-02 20:21:58
    点击进入链接https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • flexbox布局在线调试

    千次阅读 2018-09-10 22:29:07
    https://qq754958990.github.io/flexbox/dist/index.html#/
  • display:box和flex的区别

    千次阅读 2017-06-01 22:57:51
    没区别,仅是各阶段草案命名flex是最新的,但是在实际的浏览器测试中,display: flex 不能完全替代display: -webkit-boxdisplay: box 使用可以参考http://www.html5rocks.com/en/tutorials/flexbox/quick/ ...
  • 一、先了解点基础知识: 采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。 现在用一张图带你感受一下容器和项目: ...
  • Flexbox 是一种更有效的布局方式,它能更好的分配容器空间,并控制项目的对齐。虽然,掌握它的理论有些复杂,但幸运的是,我们可以借助开放的网络来学习并逐步掌握它。 在本文中,我们整合了一些最佳的 Flexbox ...
  • FlexBox很好用的下拉框控件

    千次阅读 热门讨论 2013-11-28 15:34:41
    最近发现了一个好用的开源下拉框控件,以前...该控件除了需要JQuery的js文件还需要jquery.flexbox.js文件,jquery.flexbox.css的css文件,同时还提供了几种下拉按钮的img图片,给我的做的一个最简单的html页面的代码。
  • 1)背景介绍: 网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便 2009年,W3C 提出了一种新的方案—-...
  • flexbox 剩余空间分配规则

    万次阅读 2017-11-02 21:38:25
    flexbox 剩余空间分配规则 前面我们学习到了 flexbox 布局。通过使用 flexbox 布局,我们可以更轻松实现以往很难实现的页面布局。本文主要讲解 flexbox 布局是如何去分配和计算布局剩余空间的。(本文阅读前要求...
  • HTML5 兼容性头部类

    千次阅读 2014-01-11 14:30:15
    mod_br js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage border
  • CSS的未来:游戏的变革Flexbox

    千次阅读 2013-05-06 12:15:17
    使用Flexbox布局方式的简单演示 HTML5和CSS3给网络开发者提供了新的语法标签,本地动画工具,服务器端字体等等新增功能,这些并不是结束。开发者正苦于为网页设计挖出一条战壕 - 真正的页面排版工具,事实上,即便...
  • Flexbox布局的重要属性

    千次阅读 2016-08-09 15:16:51
    /** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, ...} from 'react-nativ
1 2 3 4 5 ... 20
收藏数 16,727
精华内容 6,690
关键字:

flexbox