自适应网页的柔性布局
最编程
2024-04-29 20:46:59
...
开源中国 APP,启动!这是你从没见过的全新版本”
网页布局是css的一个重点应用。传统的布局都是依赖display、position、float属性来实现的,但是特殊布局就不易实现,如垂直居中。
flex布局是什么?
Flex 是 Flexible Box的简写,意为“弹性布局”为盒模型提供最大灵活性。任何一个容器都可以指定为flex布局。
采用flex布局的元素,称为flex容器。他的所有子元素自动成为容器成员,称为flex项目,简称项目。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
容器的属性
- flex-direction 设置排列方向(向下、向上、向左、向右)的
- flex-wrap 内容放置不下时换行方式
- flex-flow 是flex-direction和flex-wrap属性简写默认值row nowrap
- justify-content 定义在主轴上的对齐方式。
- align-items 定义项目在交叉轴上如何对齐。
- align-content 定义多根轴线的对齐方式
flex-direction属性值有四个:
- row(默认值):水平方向,从左到右,起点在左。
- row-reverse:水平方向,从右到左,起点在右。
- column:垂直方向,从上到下。
- column-reverse:垂直方向,从下到上。
flex-wrap属性值有三个:
- nowrap:不换行。
- wrap:正常换行,在第一行下方。
- wrap-reverse:换行,在第一行上方。
justify-content属性值有五个:
- flex-start(默认值):左对齐
- flex-end:右对齐
- center:居中
- space-between:两端对齐
- space-around:每个项目两侧的间隔相等。
align-items属性值有五个:
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴终点对齐。
- center:交叉轴中点对齐。
- baseline:项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设置为auto,将占满整个容器的高度。
align-content属性值六个:
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴终点对齐。
- center:交叉轴中点对齐。
- space-between:与交叉轴两端对齐,轴线之间间隔平均分布。
- space-around:每根轴线两侧间隔都相等。
- stretch(默认值):轴线占满整个交叉轴。
项目属性
- order:定义项目的排列顺序,数值越小,排列越靠前,默认为0。
- flex-grow属性:定义项目的放大比例,默认为0
- flex-shrink:定义项目的缩小比例,默认为1。
- flex-basis:定义在分配多余空间之前,项目占据的主轴空间。默认值为auto,即项目本来大小。
- flex:是flex-grow、flex-shrink、flex-basis的缩写,默认值0 1 auto。
- align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
推荐阅读
-
自适应网页的柔性布局
-
Flexbox 布局完全指南》:实现灵活自适应的网页布局
-
构建响应式网页布局:Flexbox 的力量
-
百分比填充 --------- 用于实现图像的固定比例和自适应布局,以及宽高比属性 cqw 单位
-
[css]Flex柔性布局详解[附携程网移动端案例]、35岁程序员的人生感悟--而对于有时间的同学,作者也给出了他结合众多数据结构算法书籍,精选出的千余题的解题思路和方法论,供需要的同学慢慢研究。
-
常见示例说明 - 等距布局的柔性实现
-
PS 网页设计教程 XXX - 用 PS 创建以漫画书为主题的网页布局
-
做网页中需要掌握的八大 CSS 布局技巧
-
统一应用程序的柔性布局(来自阮一峰)
-
快速掌握HTML+CSS实战:实现三行布局,中间区域自适应的简易示例