招聘网站开发的要求,免费自建网站有哪些,我做的网站上有需要别人直接下载的东西 怎么做到这一步,济南刚刚发生的大事flex 弹性布局 网页布局#xff08;layout#xff09;是 CSS 的一个重点应用。 布局的传统解决方案#xff0c;基于盒状模型#xff0c;依赖 display 属性 position属性 float属性。它对于那些特殊布局非常不方便#xff0c;比如#xff0c;垂直居中就不容易实现。 20…flex 弹性布局 网页布局layout是 CSS 的一个重点应用。 布局的传统解决方案基于盒状模型依赖 display 属性 position属性 float属性。它对于那些特殊布局非常不方便比如垂直居中就不容易实现。 2009 年W3C 提出了一种新的方案 ----Flex 布局可以简便、完整、响应式地实现各种页面布局。目前它已经得到了所有浏览器的支持这意味着现在就能很安全地使用这项功能。 Flex 布局将成为未来布局的首选方案。本文介绍它的语法下一篇文章给出常见布局的 Flex 写法。网友 JailBreak 为本文的所有示例制作了 Demo也可以参考。
以下内容主要参考了下面两篇文章A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。 一、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-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content 3.1 flex-direction 属性
flex-direction属性决定主轴的方向即项目的排列方向。
.box {flex-direction: row | row-reverse | column | column-reverse;
}它可能有 4 个值。 row默认值主轴为水平方向起点在左端。row-reverse主轴为水平方向起点在右端。column主轴为垂直方向起点在上沿。column-reverse主轴为垂直方向起点在下沿。 3.2 flex-wrap 属性
默认情况下项目都排在一条线又称 “轴线”上。flex-wrap属性定义如果一条轴线排不下如何换行。 .box{flex-wrap: nowrap | wrap | wrap-reverse;
}它可能取三个值。
1nowrap默认不换行。
![]7HPSMWR8YUHY{]YU%6J77Y.png](https://img-blog.csdnimg.cn/img_convert/e47e22ce7c9806e4d34c2e20fb2fdc3a.png#clientIdu91067a45-ddfa-4crop0crop0crop1crop1fromdropidu180ece3fname]7HPSMWR8YUHY{]YU%6J77Y.pngoriginHeight145originWidth700originalTypebinaryratio1rotation0showTitlefalsesize71677statusdonestylenonetaskIdua5040671-fa5b-452d-b246-8b0fdeec8c1title)
2wrap换行第一行在上方。
![}X)EMNC5]WIDZ{RIBMJKX6.png](https://img-blog.csdnimg.cn/img_convert/c3f53dc8d94b093c88264bfb8f9e32f2.png#clientIdu91067a45-ddfa-4crop0crop0crop1crop1fromdropidu0de60326name}X)EMNC5]WIDZ{RIBMJKX6.pngoriginHeight177originWidth700originalTypebinaryratio1rotation0showTitlefalsesize91102statusdonestylenonetaskIdu420fab12-6b8f-47db-8667-eb1328eb847title)
3wrap-reverse换行第一行在下方。
![2QWP}K]LDTZ23F426}R0L.png](https://img-blog.csdnimg.cn/img_convert/4af2c944ee4b65fa9b1a7d5fee344cf2.png#clientIdu91067a45-ddfa-4crop0crop0crop1crop1fromdropidua5c48841name2QWP}K]LDTZ23F426}R0L.pngoriginHeight177originWidth700originalTypebinaryratio1rotation0showTitlefalsesize86443statusdonestylenonetaskIdu8d8812ce-c962-4b4d-a014-ce21ad3254ctitle) 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;
}它可能取 6 个值具体对齐方式与轴的方向有关。下面假设主轴为从左到右。 flex-start默认值左对齐flex-end右对齐center 居中space-between两端对齐项目之间的间隔都相等。space-around每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。space-evenlyflex items 之间的距离相等flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离 3.5 align-items 属性
align-items属性定义项目在交叉轴上如何对齐。
.box {align-items: flex-start | flex-end | center | baseline | stretch;
}它可能取 5 个值。具体的对齐方式与交叉轴的方向有关下面假设交叉轴从上到下。 flex-start交叉轴的起点对齐。flex-end交叉轴的终点对齐。center交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch默认值如果项目未设置高度或设为 auto将占满整个容器的高度。 3.6 align-content 属性
align-content属性定义了多根轴线也就是多行 flex-items 的对齐方式用法与 justify-content 类似。如果项目只有一根轴线该属性不起作用。
.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}该属性可能取 7 个值。 flex-start与交叉轴的起点对齐。flex-end与交叉轴的终点对齐。center与交叉轴的中点对齐。space-between与交叉轴两端对齐轴线之间的间隔平均分布。space-around每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍。stretch默认值轴线占满整个交叉轴。space-evenlyflex items 之间的距离相等。flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离 四、项目 flex-item 的属性
以下 6 个属性设置在项目上。 orderflex-growflex-shrinkflex-basisflexalign-self 4.1 order 属性
order属性定义项目的排列顺序。可以设置任意整数值越小就越排在前面。默认为 0。
.item {order: integer;
}4.2 flex-grow 属性
flex-grow属性定义项目的放大比例当容器在主轴方向上有剩余空间时flex-grow 属性才会有效。默认为0即如果存在剩余空间也不放大。
如果所有 flex items 的 flex-grow 总和 sum 超过 1每个 flex item 扩展的 size 为
flex container 的剩余 size * flex-grow / sum
.item {flex-grow: number; /* default 0 */
}如果所有项目的flex-grow属性都为 1则它们将等分剩余空间如果有的话。如果一个项目的flex-grow属性为 2其他项目都为 1则前者占据的剩余空间将比其他项多一倍。 4.3 flex-shrink 属性
flex-shrink属性定义了项目的缩小比例当 flex items 在 main axis 方向上超过了 flex container 的 sizeflex-shrink 属性才会有效。默认为 1即如果空间不足该项目将缩小。
如果所有 flex items 的 flex-shrink 总和超过 1每个 flex item 收缩的 size为
flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
.item {flex-shrink: number; /* default 1 */
}![KaTeX parse error: Expected EOF, got } at position 5: [AD2}̲XQG)6E756]N[HZK…[AD2}XQG)6E756]N[HZK.pngoriginHeight145originWidth700originalTypebinaryratio1rotation0showTitlefalsesize67179statusdonestylenonetaskIducb89a24d-31b3-4af6-92f1-98e33a870a9title)
如果所有项目的flex-shrink属性都为 1当空间不足时都将等比例缩小。如果一个项目的flex-shrink属性为 0其他项目都为 1则空间不足时前者不缩小。
负值对该属性无效。 4.4 flex-basis 属性
flex-basis属性定义了在分配多余空间之前项目占据的主轴空间main size。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto即项目的本来大小。
.item {flex-basis: length | auto; /* default auto */
}它可以设为跟width或height属性一样的值比如 350px则项目将占据固定空间。
决定 flex items 最终 base size 的因素从优先级高到低
max-width\max-height\min-width\min-heightflex-basiswidth\height内容本身的 size 4.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)。
建议优先使用这个属性而不是单独写三个分离的属性因为浏览器会推算相关值。 4.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 属性完全一致。
auto默认值遵从 flex container 的 align-items 设置stretch、flex-start、flex-end、center、baseline效果跟 align-items 一致 五、最后一行的问题
沿主轴排列的方式我们一般使用 space-between两端对齐。但是多行的情况下最后一行很可能项目不够就会出现下面的样子。最后一行也是两端对齐但是因为少了所以间距和上面的行不相等。解决这个问题很简单思路就是让肉眼看到的最后一行实际不是元素的最后一行
我们可以往后面继续填充元素设置这些元素没有高度但是宽度和真实数据一样宽。
这样填充来占位置的元素没有高度不会展示出来但是把最后一行宽度给填满了布局就正常了。
填充多少个呢填充列数 - 2 个。比如4列就填充 2 个。当最后一行真实元素只有一个则最后一行实际有三个元素两端对齐但是后面两个看不到第一个真实元素靠左排布正常。当最后一行有两个则两个真实元素和两个填充元素就凑齐了所有列布局也都正常了。
