FLEX布局

最新推荐文章于 2024-02-12 22:19:08 发布
最新推荐文章于 2024-02-12 22:19:08 发布
阅读量629 收藏 1
点赞数
分类专栏： flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LIERGUAI/article/details/62040427
版权

flex布局背后的主要思想

给容器控制项目（Flex项目）的宽度、高度的能力，使用Flex项目可以自动填满容器的可用空间（主要是适应所有类型的显示设备和屏幕大小）。Flex容器使用Flex项目可以自动放大与收缩，用来填补可用的空闲空间。

注：Flexbox布局比较适合Web应用程序的一些小组件和小规模的布局，而Grid布局更适合用于一些大规模的布局。

基础知识与专业术语

因为Flexbox是一个模块，而不是一个单一的属性，他涉及很多东西。其中有一些是容器上的属性（父元素，也被称为“flex容器”），而有一些是容器子元素上的属性（常称为“flex项目”）。

如果常规布局是基于块和内联文本流方向，那么Flex布局就是基于“Flex-flow”方向。请看看下面来自规范中的一张图，其解释了Flex布局的主要思想。

这里写图片描述

基本上，Flex项目是沿着main axis(从main-start向main-end)或者cross axis(从cross-start向cross-end)排列。

  • main axis:Flex容器的主轴主要用来配置Flex项目。注意，它不一定是水平，这主要取决于flex-direction属性。

  • main-start | main-end:Flex项目的配置从容器的主轴起点边开始，往主轴终点边结束。

  • main size:Flex项目的在主轴方向的宽度或高度就是项目的主轴长度，Flex项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。

  • cross axis:与主轴垂直的轴称作侧轴，是侧轴方向的延伸。

  • cross-start | cross-end:伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。

  • cross size:Flex项目的在侧轴方向的宽度或高度就是项目的侧轴长度，Flex项目的侧轴长度属性是width或height属性，由哪一个对着侧轴方向决定。

Flex容器属性

display

定义一个Flex容器，根据其取的值来决定是内联还是块。Flex容器会为其内容建立新的伸缩格式化上下文。

.container { 
    display: flex; /* or inline-flex */ 
}

Flex容器不是块容器，因此有些设计用来控制块布局的属片在Flexbox布局中不适用。特别是：多列组中所有column-*属性、float、clear属性和vertical-align属性在Flex容器上没有作用。

如果元素display的值指定为inline-flex，而且元素是一个浮动元素或绝对定位元素，则display的计算值是flex。

开启Flex容器：让一个元素变成伸缩容器

规范版本属性名称块伸缩容器内联伸缩容器
标准版本displayflexinline-flex
混合版本displayflexboxinline-flexbox
最老版本displayboxinline-box

flex-direction

这是用来创建方轴，从而定义Flex项目在Flex容器中放置的方向。Flexbox是一种单方向的布局概念。认为Flex项目主要排列方式要么是水平排列，要么是垂直列排列。

.container { 
    flex-direction: row | row-reverse | column | column-reverse; 
}

  • row(默认值):如果书写方式是ltr，那么Flex项目从左向右排列；如果书写方式是rtl，那么Flex项目从右向左排列。

  • row-reverse:如果书写方式是ltr，那么Flex项目从右向左排列；如果书写方式是rtl，那么Flex项目从左向右排列。

  • column:和row类似，只不过方向是从上到下排列。

  • column-reverse:和row-reverse类似，只不过方向是从下向上排列。

伸缩流：指定伸缩容器主轴的伸缩流方向

规范版本属性名称水平方向反向水平垂直方向反向垂直
标准版本flex-directionrowrow-reversecolumncolumn-reverse
混合版本flex-directionrowrow-reversecolumncolumn-reverse
最老版本box-orient box-directionhorizontal normalhorizontal reversevertical normalvertical reverse

flex-wrap

默认情况之下，Flex项目都尽可能在一行显示。你可以根据flex-wrap的属性值来改变，让Flex项目多行显示。方向在这也扮演了一个重要角度，决定新的一行堆放方向。

.container{
    flex-wrap: nowrap | wrap | wrap-reverse; 
}

  • nowrap(默认值):单行显示，如果书写方式是ltr，Flex项目从左向右排列，反之rtl，从右向左排列。

  • wrap:多行显示，如果书写方式是ltr，Flex项目从左向右排列，反之rtl，从右向左排列。

  • wrap-reverse:多行显示，如果书写方式是ltr，Flex项目从右向左排列，反之rtl，从左向右排列。

换行：指定伸缩项目是否沿着侧轴排列

规范版本属性名称不换行换行反转换行
标准版本flex-wrapnowrapwrapwrap-reverse
混合版本flex-wrapnowrapwrapwrap-reverse
最老版本box-linessinglemultipleN/A

flex-flow(适用于flex容器元素)

这是flex-direction和flex-wrap两个属性的缩写。两个属性决定了伸缩容器的主轴与侧轴。默认值是row nowrap（中间用空格隔开）。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content

用于在主轴上对齐伸缩项目。这一行为会在所有可伸缩长度及所有自动边距均被解释后进行。当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。

.container { 
    justify-content: flex-start | flex-end | center | space-between | space-around; 
}

  • flex-start(默认值):伸缩项目向一行的起始位置靠齐。该行的第一个伸缩项目在主轴起点边的外边距与该行在主轴起点的边对齐，同时所有后续的伸缩项目与其前一个项目对齐。

  • flex-end:伸缩项目向一行的结束位置靠齐。该行的最后一个伸缩项目在主轴终点边的外边距与该行在主轴终点的边对齐，同时所有前面的伸缩项目与其后一个项目对齐。

  • center:伸缩项目向一行的中间位置靠齐。该行的伸缩项目将相互对齐并在行中居中对齐，同时第一个项目与该行在主轴起点的边的距离等同与最后一个项目与该行在主轴终点的边的距离（如果剩余空间是负数，则保持两端溢出的长度相等）。

  • space-between:伸缩项目会平均地分布在行里。如果剩余空间是负数，或该行只有一个伸缩项目，则此值等效于flex-start。在其它情况下，第一个项目在主轴起点边的外边距会与该行在主轴起点的边对齐，同时最后一个项目在主轴终点边的外边距与该行在主轴终点的边对齐，而剩下的伸缩项目在确保两两之间的空白空间相等下平均分布。

  • space-around:伸缩项目会平均地分布在行里，两端保留一半的空间。如果剩余空间是负数，或该行只有一个伸缩项目，则该值等效于center。在其它情况下，伸缩项目在确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半下平均分布。

主轴对齐方式：指定伸缩项目沿主轴对齐方式

规范版本属性名称startcenterendjustifydistribute
标准版本justify-contentflex-startcenterflex-endspace-betweenspace-around
混合版本flex-packstartcenterendjustifydistribute
最老版本box-packstartcenterendjustifyN/A

align-items

伸缩项目可以在伸缩容器的当前行的侧轴上进行对齐，这类似于justify-content属性，但是是另一个方向。align-items可以用来设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式。

.container { 
    align-items: flex-start | flex-end | center | baseline | stretch; 
}

  • flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。

  • flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。

  • center:伸缩项目的外边距盒在该行的侧轴上居中放置。（如果伸缩行的尺寸小于伸缩项目，则伸缩项目会向两个方向溢出相同的量）。

  • stretch:如果侧轴长度属性的值为auto，则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。

侧轴对齐方式：指定伸缩项目沿着侧轴对齐方式

规范版本属性名称startcenterendbaselinestretch
标准版本align-itemsflex-startcenterflex-endbaselinestretch
混合版本flex-alignstartcenterendbaselinestretch
最老版本box-alignstartcenterendbaselinestretch

align-content

当伸缩容器的侧轴还有多余空间时，align-content属性可以用来调准伸缩行在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的justify-content属性类似。

请注意本属性在只有一行的伸缩容器上没有效果。

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

  • flex-start:各行向伸缩容器的起点位置堆叠。伸缩容器中第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点的边，之后的每一行都紧靠住前面一行。

  • flex-end:各行向伸缩容器的结束位置堆叠。伸缩容器中最后一行在侧轴终点的边会紧靠住该伸缩容器在侧轴终点的边，之前的每一行都紧靠住后面一行。

  • center:各行向伸缩容器的中间位置堆叠。各行两两紧靠住同时在伸缩容器中居中对齐，保持伸缩容器在侧轴起点边的内容边和第一行之间的距离与该容器在侧轴终点边的内容边与第最后一行之间的距离相等。（如果剩下的空间是负数，则行的堆叠会向两个方向溢出的相等距离。）

  • space-between:各行在伸缩容器中平均分布。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于flex-start。在其它情况下，第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点边的内容边，最后一行在侧轴终点的边会紧靠住伸缩容器在侧轴终点的内容边，剩余的行在保持两两之间的空间相等的状况下排列。

  • space-around:各行在伸缩容器中平均分布，在两边各有一半的空间。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于center。在其它情况下，各行会在保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半的状况下排列。

  • stretch:各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于flex-start。在其它情况下，剩余空间被所有行平分，扩大各行的侧轴尺寸。

注意：只有多行的伸缩容器才会在侧轴上有多余的空间以供对齐，因为仅包含一行的伸缩容器中，唯一的一行会自动伸展填充全部的空间。

伸缩项目行对齐方式：指定伸缩项目行在侧轴的对齐方式

规范版本属性名称startcenterendjustifydistributestretch
标准版本align-contentflex-startcenterflex-endspace-betweenspace-aroundstretch
混合版本flex-line-packstartcenterendjustifydistributestretch
最老版本N/AN/AN/AN/AN/AN/AN/A

Flex项目属性

order

默认情况，Flex项目是按文档源的流顺序排列。然而，在Flex容器中可以通过order属性来控制Flex项目的顺序源。

.item { 
    order: <integer>; 
}

根据order重新排序伸缩项目。有最小（负值最大）order的伸缩项目排在第一个。若有多个项目有相同的order值，这些项目照文件顺序排。这个步骤影响了伸缩项目生盒树成的盒子的顺序，也影响了后面的演算法如何处理各项目。

显示顺序：指定伸缩项目的顺序

规范版本属性名称属性值
标准版本order<number>
混合版本flex-order<number>
最老版本flex-order<integer>

flex-grow

如果有必要的话，flex-grow可以定义一个Flex项目的扩大比例。它接受一个没有单位的值作为一个比例。它可以使用Flex项目完全占用Flex容器可用的空间。 如果所有Flex项目的flex-grow设置为1时，表示Flex容器中的Flex项目具有相等的尺寸。如果你给其中一个Flex项目设置flex-grow的值为2，那么这个Flex项目的尺寸将是其他Flex项目两倍（其他Flex项目的flex-grow值为1）。

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

注意：flex-grow取负值将失效。

flex-shrink

如果有必要，flex-shrink可以定义Flex项目的缩小比例。

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

注意：flex-shrink取负值将失效。

flex-basis

flex-basis属性定义了Flex项目在分配Flex容器剩余空间之前的一个默认尺寸。main-size值使它具有匹配的宽度或高度，不过都需要取决于flex-direction的值。

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

如果设置为0，内容不在考虑周围额外空间。如果设置为auto，额外空间会基于flex-grow值做分布。

flex

flex是flex-grow，flex-shrink和flex-basis三个属性的缩写。第二个和第三个参数(flex-shrink和flex-basis)是可选值。其默认值是0 1 auto。

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

建议您 使用此简写属性，而不是设置单独属性。注意，如果flex取值为none时，其相当于取值为0 0 auto。

请注意flex-grow与flex-basis的初始值与他们在flex缩写被省略时的 默认值不同。这里的设计是为了让flex缩写在最常见的情景下比较好用。

flex常见值

flex: 0 auto,flex: initial与flex: 0 1 auto相同。（这也就是初始值。）根据width／height属性决定元素的尺寸。（如果项目的主轴长度属性的计算值为auto，则会根据其内容来决定元素尺寸。）当剩余空间为正值时，伸缩项目无法伸缩，但当空间不足时，伸缩项目可收缩至其最小值。网页作者可以用对齐相关的属性以及margin属性的auto值控制伸缩项目沿着主轴的对齐方式。

flex: auto与flex: 1 1 auto相同。根据width／height属性决定元素的尺寸，但是完全可以伸缩，会吸收主轴上剩下的空间。如果所有项目均为flex: auto、flex: initial或flex: none，则在项目尺寸决定后，剩余的正空间会被平分给是flex: auto的项目。

flex: none与flex: 0 0 auto相同。根据width／height属性决定元素的尺寸，但是完全不可伸缩。其效果与initial类似，但即使在空间不够而溢出的情况下，伸缩项目也不能收缩。 flex: <positive-number>与flex: 1 0px相同。该值使元素可伸缩，并将伸缩基准值设置为零，导致该项目会根据设置的比率占用伸缩容器的剩余空间。如果一个伸缩容器里的所有项目都使用此模式，则它们的尺寸会正比于指定的伸缩比率。

默认状态下，伸缩项目不会收缩至比其最小内容尺寸（最长的英文词或是固定尺寸元素的长度）更小。网页作者可以靠设置min-width或min-height属性来改变这个默认状态。（参见《伸缩项目的默认最小长度》。） 本规范鼓励网页作者使用flex缩写来控制可伸缩性，而不是使用单独的属性，因为flex缩写会在最常见的情景正确的重置未指定的部件值。

伸缩性：指定伸缩项目如何伸缩尺寸

规范版本属性名称属性值
标准版本flexnone / [<flex-grow> <flex-shrink> ?/ <flex-basis>]
混合版本flexnone / [[<pos-flex> <neg-flex> ?]/ <preferred-size>]
最老版本box-flex<number>

align-self

align-self则用来在单独的伸缩项目上覆写默认的对齐方式。（对于匿名伸缩项目，align-self的值永远与其关联的伸缩容器的align-items的值相同。）

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

若伸缩项目的任一个侧轴上的外边距为auto，则align-self没有效果。 如果align-self的值为auto，则其计算值为元素的父元素的align-items值，如果该元素没有父元素，则计算值为stretch。对齐属性值的定义如下：

  • flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。

  • flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。

  • enter:伸缩项目的外边距盒在该行的侧轴上居中放置。（如果伸缩行的尺寸小于伸缩项目，则伸缩项目会向两个方向溢出相同的量）。

  • stretch:如果侧轴长度属性的值为auto，则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。

注意：如果伸缩伸缩的高度有限制，此可能导致伸缩项目的内容溢出该项目。

单个伸缩项目侧轴对齐方式

规范版本属性名称autostartcenterendbaselinestretch
标准版本align-selfautoflex-startcenterflex-endbaselinestretch
混合版本flex-item-alignautostartcenterendbaselinestretch
最老版本N/AN/AN/AN/AN/AN/AN/A
注意：float，clear和vertical-align属性在Flex项目中无效。

示例

让我们从一个非常简单的例子开始，解决一个问题：完美的居中。如果使用Flexbox之后，没有一个方法比这个更简单。
.parent { 
    display: flex; 
    height: 300px; /* Or whatever */ 
} 
.child { 
    width: 100px; /* Or whatever */ 
    height: 100px; /* Or whatever */ 
    margin: auto; /* Magic! */
}

这主要依赖于margin设置auto，自动分配Flex容器额外空间。这使用Flex项目在水平和垂直方向都居中。 现在让我们使用更多的属性。有六个固定尺寸的列表，但它们可能是auto-sized。我们希望他们能均匀和很好地分布在容器的不平轴，以便我们调整浏览器的时候，一切都很好（在没有使用媒体查询之下）。

.flex-container { 
    /* We first create a flex layout context */ 
    display: flex; 
    /* Then we define the flow direction and if we allow the items to wrap 
    - Remember this is the same as: 
    - flex-direction: row; 
    - flex-wrap: wrap; 
    */ 
    flex-flow: row wrap; 
    /* Then we define how is distributed the remaining space */ 
    justify-content: space-around; 
}

完成了。其他一切都不过是一些样式问题。下面是在Codepen上创建的一个示例，你可以在Codepen上打开这个示例，并调整你浏览窗口大小，看看会发生些什么。
让我们再试试别的东西。想象一下，我们站点右侧顶端有一个导航。但我们希望它在medium-sized屏幕和小型设备上能单列显示。这样的效果也很容易。

/* Large */ 
.navigation { 
    display: flex; 
    flex-flow: row wrap; 
    /* This aligns items to the end line on main-axis */ 
    justify-content: flex-end; 
} 
/* Medium screens */ 
@media all and (max-width: 800px) { 
    .navigation { 
    /* When on medium sized screens, we center it by evenly distributing empty space around items */ 
    justify-content: space-around; 
    } 
} 
/* Small screens */ 
@media all and (max-width: 500px) { 
    .navigation { 
    /* On small screens, we are no longer using row direction but column */ 
    flex-direction: column; 
    } 
}

让我们尝试一些更好玩的，比如Flex项目的灵活性。考虑到“移动先行”，在宽屏时，三列布局，而且页头和页尾都全屏，而在移动端上单列显示，并且不修改DOM结构修改其显示顺序。

.wrapper { 
    display: flex; 
    flex-flow: row wrap; 
} 

/* We tell all items to be 100% width */ 

.header, .main, .nav, .aside, .footer { 
    flex: 1 100%; 

/* We rely on source order for mobile-first approach
 - in this case:
 - 1. header 
 - 2. nav 
 - 3. main 
 - 4. aside 
 - 5. footer 
 */

 /* Medium screens */ 

 @media all and (min-width: 600px) { 

/* We tell both sidebars to share a row */ 

    .aside { 
        flex: 1 auto; 
    }
} 

/* Large screens */ 

@media all and (min-width: 800px) { 

/* We invert order of first sidebar and main - And tell the main element to take twice as much width as the other two sidebars */ 

    .main { 
        flex: 2 0px; 
    } 
    .aside-1 { 
        order: 1; 
    } 
    .main { 
        order: 2; 
    } 
    .aside-2 { 
        order: 3; 
    } 
    .footer { 
        order: 4; 
    } 
}

浏览器前缀

使用Flexbox，为了支持大多数浏览器可能需要添加前缀。它不仅包括添加浏览器的私有前缀，而且还要使用不同的属性名和属性值。这是因为Flexbox规范随着时间的向前推移有多个版本：最老版本、混合版本和标准版本。

也许通过Autoprefixer语法是最好的方式来处理Flexbox方式和运行你的CSS，这种方式可能是最好的处理方式。

另外，这里有一个Sass写的@mixin帮助你处理一些前缀，你只需要这样做：

@mixin flexbox() { 
    display: -webkit-box;
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 
@mixin flex($values) { 
    -webkit-box-flex: $values; 
    -moz-box-flex: $values; 
    -webkit-flex: $values; 
    -ms-flex: $values; 
    flex: $values; 
} 
@mixin order($val) { 
    -webkit-box-ordinal-group: $val; 
    -moz-box-ordinal-group: $val; 
    -ms-flex-order: $val; 
    -webkit-order: $val; 
    order: $val; 
} 
.wrapper { 
    @include flexbox(); 
}
.item { 
    @include flex(1 200px); 
    @include order(2); 
}

相关属性

GRID

推荐阅读

探索Flexbox
图解CSS3 Flexbox属性

Bugs

Flexbox功能虽然强大，但并不是没有问题，至少目前阶段之下，特别是移动端中使用Flexbox还是存在不少问题。幸好Philip Walton和Greg Whitworth收集和整理了有关于Flexbox的Bugs。这是一个开源的项目，可以很好的跟踪有关于Flexbox的问题，所以我认为这是最好的一份资源。

浏览器兼容

前面也简单提到了，Flexbox的语法规范有多个版本，可以拆分成：

  • (最新版本)最近的版本，意味着是最近的一个语法版本(如display:flex;)

  • (混合版本)也是中间版本，2011年提出的一个语法版本，这是一个很奇葩的非官方的语法版本，主要是为IE浏览器提供（如:display:flexbox;）

  • (最老版本)2009年的语法版本，也是最老的一个语法版本（如：display:box;）

洗碗不要叫我
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex布局
03-29
Flex布局 简介 Flex是Flexible Box的缩写，意为弹性布局。是W3C在2009年提出的一个新的布局方案。可以方便的实现各种页面布局。目前浏览器兼容如下：   (此图片来源于网络，如有侵权，请联系删除! )   Flex在...
CSS常用布局二（flex布局）
BreenCL的博客
07-20 2677
flex布局 前言：flex是flexible box的缩写，译为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，只需要设置“display:flex"即可；行内元素可以通过设置”display:inline-flex“实现；需要注意的是，如果设置了flex布局，则子元素的float、clear和vertical-align属性将失效； 1.基本概念 使用了flex布局的元素，称为flex容器（flex container），简称为”容器“。它所有的子元素自动生成容器成员，
flex布局（详解）
fish_zhangyu的博客
10-13 6728
Flex是的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局.box{行内元素也可以使用flex布局.box{Webkit内核的浏览器，需要加上-webkit前缀。.box{
Flex布局 （上万字）超详细讲解 这篇就够了
最新发布
程序员碎像的博客
02-12 3795
Flex布局，全称为“Flexible Box Layout”，意为“弹性盒布局”。它是一种现代的CSS布局模式，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化。灵活性：Flex布局允许项目在容器中灵活地扩展和收缩，以填充可用空间或调整大小以适应内容。对齐方式：Flex布局提供了各种对齐选项，可以轻松地实现水平和垂直对齐。方向控制：可以方便地改变主轴的方向，使项目在水平或垂直方向上排列。空间分配。
flex布局
YMYYZ的博客
01-31 8540
flex布局的详细解读
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
肥晨开发的学习之路
06-16 8万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
前端布局 Flex（弹性）布局
qq_63512287的博客
10-15 1万+
前端布局中的Flex布局
Flex 布局教程
01-02
Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。... 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
详解CSS中的flex布局
01-19
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局 声明弹性盒子的几种方式 就像前面说的，所有容器都可以指定为flex布局 .box{ display:flex;} 行内元素也可以使用： display:inline-flex; 改变弹性...
flex布局实现上下固定中间滑动的布局方式
11-20
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下: 例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部，中间部分可滑动...
flex弹性布局（详解）
wshwsh_的博客
08-09 8423
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
flex布局看这一篇就够了
qq_46048008的博客
08-20 1万+
“弹性盒布局”，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化声明定义容器里面包含着项目元素，使用或声明为弹性容器。
Flex布局详细解析
前端卷王小白的博客
04-16 8772
Flex布局完整的详细解析,轻松学会并应用Flex布局
详细讲解flex布局
weixin_47192981的博客
02-06 9681
关于flex布局基础知识差不多介绍完了，这个布局是我平时使用很多的一个布局，可以解决很多手动排版以及图片与文字对齐等等的问题，希望大家可以掌握好这个布局，会十分得心应手！即，定义时要将flex定义在父元素，把父元素当做‘容器’，然后改变内部子元素的排列方式。如上图，父元素宽度已经不能承载所有子元素放到一行，但是由于没有设置换行，所以会压缩子元素，强制排到一行。在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定位布局等等。主轴和交叉轴是垂直的，两个轴的由来取决于子元素的排列方式，如图。
Flex布局全面介绍
qq_59305028的博客
07-17 7349
Flex基本介绍
Flex布局详解及活用
qq_45796592的博客
02-03 2991
Flex布局详解及活用，方便熟练使用flex布局
flex 布局详细
热门推荐
scorpion_V的博客
07-02 28万+
flex布局
flex布局详解
程序员小明1024
12-20 5848
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .ma...
弹性布局 flex布局
08-22
Flex布局，也称为弹性布局，是一种浏览器提倡的布局模型。它的特点是可以更简单、灵活地布局网页，避免了浮动脱标的问题。通过使用Flex布局，我们可以精确灵活地控制块级盒子的布局方式，避免浮动布局中脱离文档流...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值