点击登录
  • 欢迎访问亿浪博客,最新前端学习资料,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏亿浪博客吧

CSS 常见布局方式

前端设计 迷惘 1个月前 (08-21) 59次浏览 已收录 0个评论 扫描二维码

CSS 常见布局方式

CSS 常见布局方式

传统盒模型布局方式

我们的传统布局方式就是通过盒模型,使用 display 属性(文档流布局) + position 属性(定位布局) + float属性(浮动布局)。这个大家都比较熟悉,没有掌握的同学再去恶补一下基础

文档流布局

这是最基本的布局方式,就是按照文档的顺序一个一个显示出来,块元素独占一行,行内元素共享一行,这个相信大家都比较熟悉了,就不再赘述了

浮动布局

浮动方式布局就是使用 float 属性,使元素脱离文档流,浮动起来。这个大家也比较熟悉,就不再赘述了。

定位布局

我们也可以通过 position 属性来进行定位,这个大家也比较熟悉了,就不再赘述了。

flex 布局

CSS 常见布局方式
仅仅通过上述的三种布局方式还是有一些缺陷,比如我们不能只使用一个属性来实现垂直居中布局,所以就产生了第四种布局方式:flex 布局。

什么是 flex 布局

flex 是一种新型的布局方式,使用该布局方式可以实现几乎所有你想要的效果。但是要注意其浏览器的兼容性,flex 只支持 ie 10+,所有还是要根据你的项目情况使用(没错,我们要求至少 ie 9,(ಥ_ಥ))。
CSS 常见布局方式

使用 flex 布局

flex 的使用方法很简单,只需要将其 display 属性设置为 flex 就可以,也可以设置行内的 flex,记得 Webkit 内核的浏览器,必须加上 -webkit 前缀。

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

.ele{
    display: -webkit-flex;
    display: flex;
    display: inline-flex;
    display: -webkit-inline-flex;
}

在使用 flex 的元素中,默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)
主轴开始的位置称为 main start,主轴结束的位置称为 main end
同理,交叉轴开始的位置称为 cross start,交叉轴结束的位置称为 cross end
在使用 flex 的子元素中,占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size
CSS 常见布局方式

父容器属性

父容器上有六个属性

  • flex-direction:主轴的方向。
  • flex-wrap:超出父容器自容器的排列样式。
  • flex-flow:flex-direction 属性和 flex-wrap 属性的简写形式。
  • justify-content:子容器在主轴的排列方向。
  • align-items:子容器在交叉轴的排列方向。
  • align-content:多根轴线的对齐方式。

flex-direction 属性

flex-direction 属性决定主轴的方向

主轴的方向不一定是水平的,这个属性就是设置主轴的方向,主轴默认是水平方向,从左至右,如果主轴方向设置完毕,那么交叉轴就不需要设置,交叉轴永远是主轴顺时针旋转 90°

.ele {
  flex-direction: row;                // 默认值,主轴为水平方向,起点在左端。
  flex-direction: row-reverse;        // 主轴为水平方向,起点在右端。
  flex-direction: column;             // 主轴为垂直方向,起点在上。
  flex-direction: column-reverse;     // 主轴为垂直方向,起点在下。
}

CSS 常见布局方式

flex-wrap 属性

flex-wrap 属性决定子容器如果在一条轴线排不下时,如何换行。

.ele {
 flex-wrap: nowrap;          // 默认,不换行
 flex-wrap: wrap;            // 换行,第一行在上方。
 flex-wrap: wrap-reverse     // 换行,第一行在下方。
 }

CSS 常见布局方式

justify-content 属性

justify-content 属性定义了子容器在主轴上的对齐方式。

.ele{
    justify-content: flex-start;      // 默认,左对齐
    justify-content: flex-end;        // 右对齐
    justify-content: center;          // 居中
    justify-content: space-between;   // 两端对齐,项目之间的间隔都相等。
    justify-content: space-around;    // 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
    
}

#### flex-flow 属性
`flex-flow` 属性是 `flex-direction` 属性和 `flex-wrap` 属性的简写形式,默认值为 `row nowrap`。
```css
.ele {
  flex-flow: <flex-direction> || <flex-wrap>;
}

CSS 常见布局方式

align-items 属性

align-items属性定义自容器在交叉轴上如何对齐。
具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

.ele{
    align-items: flex-start;    // 交叉轴的起点对齐。
    align-items: flex-end;      // 交叉轴的终点对齐。
    align-items: center;        // 交叉轴的中点对齐。
    align-items: baseline;      // 项目的第一行文字的基线对齐。
    align-items: stretch;       // 默认,如果项目未设置高度或设为auto,将占满整个容器的高度。
}

CSS 常见布局方式

align-content 属性

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

.ele{
    align-content: flex-start;   // 与交叉轴的起点对齐
    align-content; flex-end;     // 与交叉轴的终点对齐。
    align-content: center;       // 与交叉轴的中点对齐。
    align-content: space-between;// 与交叉轴两端对齐,轴线之间的间隔平均分布。
    align-content: space-around; // 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    align-content: stretch;     // 默认 轴线占满整个交叉轴。
}

CSS 常见布局方式


亿浪博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明CSS 常见布局方式
喜欢 (0)
[]
分享 (0)
迷惘
关于作者:
亿浪博客是一个个人博客,主要写一些个人学习心得 、笔记什么的,分享下网络实用常识、 实用软件、 心情随笔 、手机技巧 、站长工具等文章!!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址