弹性布局flex,order排序语法,对齐,align-self,flex空间分配。
弹性布局:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 弹性布局:以下建议使用开发者工具修改值进行查看非常直观易懂。 弹性布局属性使用顺序: 一,父元素属性设置顺序: 以下四个属性是对主轴方向上的子元素进行调整: 1,设置弹性盒子 display:flex; 2,确定主轴及其排列方向,这个值已经确定了排列方向,下面所有子元素都一样, 如果是从左到右,那么下面也都是确定从左到右排列,不能改变。 flex-direction: row; 默认值,从左到右排列 row-reverse; 从右到左排列 column; 从上到下排列 column-reverse; 从下到上排列 3,设置是否换行(flex-direction已经确定排列方向,不能改变,谨记别出错了。) flex-wrap: nowrap; 默认值,不进行换行,可能溢出。 wrap; 换行,第一行排不下,第二行排列。。。(从左到右) wrap-reverse; 跟wrap相反,最后一行从左到右排列,倒数第二行从左到右排列。。。 4,设置主轴方向上子元素的排列位置 justify-content: flex-start; 所有子元素在主轴开始位置堆叠 flex-end; 所有子元素在主轴结束位置堆叠 center; 所有子元素在主轴中间堆叠 space-around; 所有子元素在主轴方向上的两边边距相等(ml=mr或者mt=mb) space-between; 主轴两端子元素靠边,另外所有子元素之间的间距相等 space-evenly; 所有子元素之间的边距,及其两端子元素到到边的边距相等。 以下两个属性是对侧轴方向的子元素进行调整: 5,设置侧轴方向上子元素的排列位置 align-content: stretch; 默认。各行将会伸展以占用剩余的空间。 flex-start; 所有子元素在侧轴开始位置堆叠 flex-end; 所有子元素在侧轴结束位置堆叠 center; 所有子元素在侧轴中间堆叠 space-around; 所有子元素在侧轴方向上的两边边距相等(ml=mr或者mt=mb) space-between; 侧轴两端子元素靠边,另外所有子元素之间的间距相等 space-evenly; 所有子元素之间的边距,及其两端子元素到到边的边距相等。 6,设置好以上5个属性基本可以排列好子元素位置: align-items: 各个值解析: flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。 flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。 center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。 baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。 stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。 align-items 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。 align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。 二,实例 1,flex-direction的值有: row:横向从左到右排列(左对齐),默认的排列方式。 row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。 column:纵向排列。 column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。 2,举例:其中固定一个值 flex-direction:column-reverse; 即:竖直从上往下排列为:4321 其中 justify-content的值分别等于: flex-start 时 子元素 1 靠父元素的底边 flex-end 时 子元素 4 靠父元素的上边 cneter 时 所有子元素上下居中排列 space-around 时 每个子元素的margin-top/margin-bottom都相等 space-between 时 元素1靠父元素底边,元素4靠父元素上边,每两个元素之前的边距相等 space-evenly 时 元素1与父元素底边,元素4与父元素上边,以及元素与元素之前的边距相等。 即所有边距相等。 3,align-items 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。即:与主轴垂直的方向。 固定其中两个值: flex-direction:column-reverse; 主轴排列方式为垂直反向排列,即从上往下:4321 justify-content:space-evenly; 所有的外边距都相等。 主轴垂直反向排列,所以元素排列为一竖,所以align-items就是确定该竖的位置 当align-items值分别等于: flex-start 时 该竖靠父元素左边 flex-end 时 该竖靠父元素右边 center 时 该竖左右居中 baseline 时 该竖靠父元素左边(等价于flex-start) stretch 时 该竖靠父元素左边(如果width没有定义,那么会把元素拉伸到最大宽度) 这里可以注释掉如下样式中的 .container > span 中的width, 并且使用开发者工具进行查看就可清楚。 三,CSS3 弹性盒子属性 下表列出了在弹性盒子中常用到的属性: display 指定 HTML 元素盒子类型。 flex-direction 指定了弹性容器中子元素的排列方式 justify-content 设置弹性盒子元素在主轴(横轴)方向上的对齐方式。 align-items 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。 flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。 align-content 修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐 flex-flow flex-direction 和 flex-wrap 的简写 order 设置弹性盒子的子元素排列顺序。 align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。 flex 设置弹性盒子的子元素如何分配空间。 </title> </head> <style> .container{ width: 500px; height: 500px; background: lightgrey; display: flex; flex-wrap: wrap; flex-direction:column-reverse; justify-content:flex-start; align-content: flex-start; align-items:stretch; } .container > span{ background: #0f0; display: inline-block; width: 100px; height: 100px; } </style> <body> <div class="container"> <span class="one1" style="background: blue">001</span> <span class="one2" style="background: green">002</span> <span class="one3" style="background: yellow">003</span> <span class="one4" style="background: orange">004</span> <span class="one5" style="background: #0f0">004</span> <span class="one6" style="background: #f3f">004</span> <span class="one7" style="background: #553">004</span> <span class="one8" style="background: #2f8">004</span> </div> </body> </html>
order排序语法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 排序语法 1,order默认值都是0,可以是负数,值越小排列越靠前,值越大排列越靠后面。 2,子元素: ABCD 所有子元素都不设置order值,默认值为0。 如果设置B的 order > 0 则排列在最后面 如果设置B的 order = 0 则所有排列不变 如果设置B的 order < 0 则B排列在最前面 </title> </head> <style> .container{ width: 530px; height: 530px; background: #eee; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: flex-start; align-items: center; } .flex-item{ width: 100px; height: 100px; } .one1{ /*order:1;*/ } .one2{ order:-1; } .one3{ /*order:1;*/ } .one4{ /*order:1;*/ } .one5{ /*order:1;*/ } .one6{ /*order:1;*/ } .one7{ order:-5; } </style> <body> <div class="container"> <span class="flex-item one1" style="background: #f00">flex-item 1</span> <span class="flex-item one2" style="background: #0f0">flex-item 2</span> <span class="flex-item one3" style="background: #00f">flex-item 3</span> <span class="flex-item one4" style="background: #0ff">flex-item 4</span> <span class="flex-item one5" style="background: #f0f">flex-item 5</span> <span class="flex-item one6" style="background: #e9f">flex-item 6</span> <span class="flex-item one7" style="background: #77e">flex-item 7</span> </div> </body> </html>
在弹性盒子里面设置margin的值为“auto”,进行各种居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 对齐: 1,在弹性盒子里面只要使用: margin:auto; margin-top:auto; margin-right:auto; margin-bottom:auto; margin-left:auto; 设置"margin"值为"auto"值,自动获取弹性容器中剩余的空间。 所以设置垂直方向margin值为"auto",可以使弹性子元素在弹性容器的两上轴方向都完全居中。 同理,设置水平方向上的margin-left/right值为“auto”,可以使子元素在弹性容器的水平方向左右居中。 此外,如果同一行有ABC三个子元素,设置B子元素margin-right:auto; 那么AB靠左边堆叠,C直接靠右顶边。 如果给B设置margin-left:auto;margin-right; 那么弹性盒子的宽度减去三个子元素的宽度,B就会相对剩余空间左右居中。即左右边距相等。 </title> </head> <style> .container{ width: 530px; height: 330px; background: #0ff; margin-top: 30px; display: flex; /*flex-direction: row;*/ /*flex-wrap: wrap;*/ /*justify-content: flex-start;*/ /*align-content: flex-start;*/ } .flex-item{ display: inline-block; height: 100px; width: 100px; } .one{ margin-right: auto; margin-left: auto; } .two{ margin-right: auto; } .three{ margin-left: auto; } .four{ margin: auto; } </style> <body> <h3> 在弹性盒子里面只要使用 设置"margin"值为"auto"值,自动获取弹性容器中剩余的空间。 所以设置垂直方向margin值为"auto",可以使弹性子元素在弹性容器的两上轴方向都完全居中。 同理,设置水平方向上的margin-left/right值为“auto”,可以使子元素在弹性容器的水平方向左右居中。 </h3> <h4>设置第二个子元素margin-left/margin-right:auto;就会平均分配在弹性盒子中剩下的空间给左右边距。</h4> <div class="container"> <span class="flex-item" style="background: #f00">flex-item 1</span> <span class="flex-item one" style="background: #ff0">左右外边距相等</span> <span class="flex-item" style="background: #0f0">flex-item 3</span> </div> <div class="container"> <span class="flex-item two" style="background: #f00">flex-item 1</span> <span class="flex-item" style="background: #ff0">flex-item 2</span> <span class="flex-item" style="background: #0f0">flex-item 3</span> </div> <div class="container"> <span class="flex-item" style="background: #f00">flex-item 1</span> <span class="flex-item" style="background: #ff0">flex-item 2</span> <span class="flex-item three" style="background: #0f0">flex-item 3</span> </div> <div class="container"> <span class="flex-item four" style="background: #0f0">上下左右绝对居中</span> </div> </body> </html>
align-self 属性是相对于侧轴对子元素本身沿着侧轴方向上进行位置设定:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 1,align-self 属性用于设置弹性子元素自身在侧轴(纵轴)方向上的对齐方式。 总而言之:最好可以使用开发者工具进行设置。 2,align-content 设置侧轴方向上的行/列的位置, align-slef 是设置侧轴方向上的行内/列内的子元素的位置 所以,如果设置了align-content,再设置align-self 是无效的。 具体,具体请使用开发者工具进行调试,简单易懂。 </title> </head> <style> .flex-container{ padding: 30px; width: 600px; height: 500px; background: #624F5E; margin: auto; display: flex; flex-wrap: wrap; flex-direction: column; margin-top: 50px; } .flex-item{ height:123px; } .flex-1{ background: #f00; align-self: flex-start; margin-right: auto; margin-left: auto; } .flex-2{ background: #ff0; } .flex-3{ background: #f0f; align-self: flex-end; } .flex-4{ background: #0f3; } .flex-5{ background: #dd3; } .flex-6{ background: #233; align-self: flex-end; } .flex-7{ background: #a3e; align-self: flex-start; } .flex-container-div{ width: 500px; height: 500px; background: #624F5E; margin-top: 50px; display: flex; flex-direction: row; flex-wrap: wrap; /*align-content: space-between;*/ } .flex-item-div{ width: 100px; height: 100px; } .flex-item-div1{ background: #f00; align-self: flex-start; margin-right: auto; margin-left: auto; } .flex-item-div2{ background: #ff0; } .flex-item-div3{ background: #f0f; align-self: flex-end; } .flex-item-div4{ background: #0f3; } .flex-item-div5{ background: #dd3; } .flex-item-div6{ background: #233; align-self: flex-end; } .flex-item-div7{ background: #a3e; align-self: flex-start; } .flex-item-div8{ background: #f0f; align-self: flex-end; } .flex-item-div9{ background: #0f3; } .flex-item-div10{ background: #dd3; } </style> <body> <h3> 以下所有的flex-item都没有设置width,flex-wrap:wrap;设置可以换行; flex-direction:column主轴为:垂直从上到下排列,子元素比较多,所以换行排列。 因为没有设置width,默认会占满剩余空间。 如果子元素只够排一列,那么子元素width的值默认是弹性盒子宽度的100%,该宽度就是侧轴及其方向 如果子元素排两列,那么子元素width的值是弹性盒子的宽度的50%,该宽度就是侧轴及其方向 如果子元素排三列,那么子元素width的值是弹性盒子的宽度的33.3%,该宽度就是侧轴及其方向 如果子元素排四列,那么子元素width的值是弹性盒子的宽度的25%,该宽度就是侧轴及其方向 谨记:align-self是相对于侧轴及其方向上进行位置设定的。如果子元素侧轴宽/高度固定那么该属性就无效了。 align-self: auto; 子元素自定拉伸宽度 = 侧轴的最大宽度 flex-start; 子元素位于侧轴起点 flex-end; 子元素位于侧轴终点 center; 子元素位于侧轴中间 baseline; 如弹性盒子元素的行内轴与侧轴为同一条, 则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。 如果没有设置宽度,那么该子元素的宽度为内容撑开。 stretch; 如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸, 但同时会遵照'min/max-width/height'属性的限制。 </h3> <div class="flex-container"> <span class="flex-item flex-1">flex-item 1</span> <span class="flex-item flex-2">flex-item 2</span> <span class="flex-item flex-3">flex-item 3</span> <span class="flex-item flex-4">flex-item 4</span> <span class="flex-item flex-5">flex-item 5</span> <!-- <span class="flex-item flex-6">flex-item 6</span> <span class="flex-item flex-7">flex-item 7</span> <span class="flex-item flex-1">flex-item 1</span> <span class="flex-item flex-2">flex-item 2</span> <span class="flex-item flex-3">flex-item 3</span> <span class="flex-item flex-4">flex-item 4</span> <span class="flex-item flex-5">flex-item 5</span> <span class="flex-item flex-6">flex-item 6</span> <span class="flex-item flex-7">flex-item 7</span> --> </div> <div class="flex-container-div"> <div class="flex-item-div flex-item-div1">flex-item-div 1</div> <div class="flex-item-div flex-item-div2">flex-item-div 2</div> <div class="flex-item-div flex-item-div3">flex-item-div 3</div> <div class="flex-item-div flex-item-div4">flex-item-div 4</div> <div class="flex-item-div flex-item-div5">flex-item-div 5</div> <div class="flex-item-div flex-item-div6">flex-item-div 6</div> <div class="flex-item-div flex-item-div7">flex-item-div 7</div> <div class="flex-item-div flex-item-div8">flex-item-div 8</div> <div class="flex-item-div flex-item-div9">flex-item-div 9</div> </div> </body> </html>
flex 属性是针对主轴方向上剩余空间进行分配
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> flex 属性用于指定弹性子元素如何分配空间--指:分配主轴一行/一列中剩余的空间。 flex的值可以直接是非负数(即:可以是0,小数,正整数)。 我的理解是:以下三个属性中只有flex-grow才起作用。所以以下值少做了解即可。 官方各个值解析: auto: 计算值为 1 1 auto initial: 计算值为 0 1 auto none:计算值为 0 0 auto inherit:从父元素继承 以上缩写的三个值分别代表: [ flex-grow ]:定义弹性盒子元素的扩展比率。 [ flex-shrink ]:定义弹性盒子元素的收缩比率。 [ flex-basis ]:定义弹性盒子元素的默认基准值。 flex-flow:row nowrap;在不可以换行的情况下: 子元素堆叠没有溢出,且在主轴方向上有多余空间,flex设置才有效。 溢出或没有空间,flex属性就是无效的。 flex-flow:row wrap;在可以换行的情况下: flex属性是针对在主轴方向上,每一行子元素堆叠剩余空间的分配。 每个子元素最小宽/高不会小于先前已经设定的值。 如果给子元素对象设置一个margin-left值过大而当前行装不下,则立马自动换行。 实例:一个弹性盒子中一行有ABC三个子元素堆叠一起(每个元素的宽高都是100px),没有溢出 且display:flex; flex-flow:row wrap; 在主轴方向上向左堆叠还剩余200px空间。 1,给子元素分别设置flex属性 如: A[flex:1] B[flex:2] C[flex:2] 即: 200px/5 = 40px; A子元素的宽度 = 100px + 40px = 140px; B子元素的宽度 = 100px + 40px * 2 = 180px; C子元素的宽度 = 100px + 40px * 2 = 180px; 2,给子元素分别设置flex属性 如: A[flex:1] B[flex:2] C[flex:2] 即: 200px/5 = 40px; A子元素的宽度 = 100px + 40px = 140px; B子元素的宽度 = 100px + 40px * 2 = 180px; C子元素的宽度 = 100px + 40px * 2 = 180px; 3,其他同上,唯一不同的是弹性盒子里面只有一个元素A。 即: 200px/1 = 200px; A子元素的宽度 = 100px + 200px * 1 = 300px; 最好的做法:给所有子元素都添加: flex-grow: 0; flex-shrink: 0; flex-basis: auto; 然后使用开发者工具进行测试即可。 </title> </head> <style> .flex-container{ width: 550px; height: 440px; background: #ddd; /*padding:20px;*/ display: flex; flex-flow: row wrap; margin-top: 30px; } .flex-item{ width: 100px; height: 100px; display: inline-block; } .flex-item-1{ flex-grow: 0; flex-shrink: 0; flex-basis: auto; background:#f00; } .flex-item-2{ flex-grow: 0; flex-shrink: 0; flex-basis: auto; background:#00f; } .flex-item-3{ flex-grow: 0; flex-shrink: 0; flex-basis: auto; background:#ff0; } .flex-item-4{ flex-grow: 0; flex-shrink: 0; flex-basis: auto; background:#0ff; } .flex-item-5{ flex-grow: 0; flex-shrink: 0; flex-basis: auto; background:#ff0; } .flex-item-6{ flex-grow: 0; flex-shrink: 0; flex-basis: auto; background:#00f; } .flex-item-7{ flex-grow: 0; flex-shrink: 0; flex-basis: auto; background:#f00; } .flex-item-8{ flex-grow: 0; flex-shrink: 0; flex-basis: auto; background:#091D77; } .flex-item-9{ flex-grow: 0; flex-shrink: 0; flex-basis: auto; background:#C326C5; } .flex-item-10{ flex-grow: 0; flex-shrink: 0; flex-basis: auto; background:#F2A241; } .fct{ flex-flow: row nowrap; } </style> <body> <div class="flex-container"> <span class="flex-item flex-item-1">flex-item 1</span> <span class="flex-item flex-item-2">flex-item 2</span> <span class="flex-item flex-item-3">flex-item 3</span> <span class="flex-item flex-item-4">flex-item 4</span> <span class="flex-item flex-item-5">flex-item 5</span> <span class="flex-item flex-item-6">flex-item 6</span> <span class="flex-item flex-item-7">flex-item 7</span> <span class="flex-item flex-item-8">flex-item 8</span> <!-- <span class="flex-item flex-item-9">flex-item 9</span> --> <!-- <span class="flex-item flex-item-10">flex-item 10</span> --> </div> <div class="flex-container fct"> <span class="flex-item flex-item-1">flex-item 1</span> <span class="flex-item flex-item-2">flex-item 2</span> <span class="flex-item flex-item-3">flex-item 3</span> <span class="flex-item flex-item-4">flex-item 4</span> <span class="flex-item flex-item-5">flex-item 5</span> <span class="flex-item flex-item-6">flex-item 6</span> <span class="flex-item flex-item-7">flex-item 7</span> <span class="flex-item flex-item-8">flex-item 8</span> <!-- <span class="flex-item flex-item-9">flex-item 9</span> --> <!-- <span class="flex-item flex-item-10">flex-item 10</span> --> </div> </body> </html>