CSS Flexbox 布局

更新日期: 2022-09-18阅读: 803标签: 布局

css 弹性盒子 Flexbox 布局

Flexbox(弹性盒子)是 CSS3 中引入的一种强大且兼容性好的布局方法。使用 flexbox,可以很容易地处理好页面上的元素布局,并创建可以自动缩小和放大的动态用户界面。

flex 盒子模式

只要在一个元素的 CSS 中添加 display: flex;,就可以使用其它 flex 属性来构建响应式页面了。

#box-container {
 display: flex;
}

行,列 Row Culomn

给元素添加 display: flex 属性可以让它变成 flex 容器, 然后可以让元素的项目排列成行或列。 只要给父元素添加 flex-direction 属性,并把属性值设置为 row 或 column,即可横向排列或纵向排列它的所有子元素。 创建一行将使子项水平对齐,创建一列将使子项垂直对齐。

flex-direction 的其他可选值还有 row-reverse 和 column-reverse。

注意: flex-direction 的默认值为 row。

#box-container {
 display: flex;
 flex-direction: row;
 /* flex-direction: column */
}

父元素对齐 Align

子元素排列的方向被称为 main axis(主轴)。 对于行,主轴水平贯穿每一个项目; 对于列,主轴垂直贯穿每一个项目。

对于如何沿主轴线排放 flex 项目,有几种选择。 很常用的一种是 justify-content: center;:即 flex 子元素在 flex 容器中居中排列。 其他选择包括:

  • flex-start:从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边, 对于列是把项目移至顶部。 如未设置 justify-content 的值,那么这就是默认值。

  • flex-end:从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边, 对于列是把项目移至底部。

  • space-between:项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如,在行中第一个项目会紧贴着容器左边,最后一个项目会紧贴着容器右边,然后其他项目均匀排布。

  • space-around:与space-between相似,但头尾两个项目不会紧贴容器边缘,所有项目之间的空间均匀排布。

  • space-evenly:头尾两个项目不会紧贴容器边缘,所有项目之间的空间均匀排布。

#box-container {
 justify-content: center;
}

Flex 容器中,与主轴垂直的叫做 cross axis(交叉轴)。 行的交叉轴是垂直的,列的交叉轴是水平的。

CSS 中的 align-items 属性用来定义 flex 子元素沿交叉轴的对齐方式。 对行来说,定义的是元素的上下对齐方式; 对列来说,是定义元素的左右对齐方式。

align-items 的可选值包括:

  • flex-start:从 flex 容器的起始位置开始对齐项目。 对行来说,把项目移至容器顶部; 对列来说,是把项目移至容器左边。

  • flex-end:从 flex 容器的终止位置开始对齐项目。 对行来说,把项目移至容器底部; 对列来说,把项目移至容器右边。

  • center:把项目居中放置。 对行来说,垂直居中(项目距离顶部和底部的距离相等); 对列来说,水平居中(项目距离左边和右边的距离相等)。

  • stretch:拉伸项目,填满 flex 容器。 例如,排成行的项目从容器顶部拉伸到底部。 如未设置align-items的值,那么这就是默认值。

  • baseline:沿基线对齐。 基线是文本相关的概念,可以认为它是字母排列的下端基准线。

#box-container {
 align-items: center;
}

换行 Wrap

CSS flexbox 有一个把 flex 子元素拆分为多行(或多列)的特性。

默认情况下,flex 容器会调整项目大小,把它们都塞到一起。 对于行来说,所有项目都会在一条直线上。

不过,使用 flex-wrap 属性可以使项目换行展示。 这意味着多出来的子元素会被移到新的行或列。 换行发生的断点由子元素和容器的大小决定。

换行方向的可选值有这些:

  • nowrap:默认值,不换行。

  • wrap:如果排列以行为基准,就将行从上往下排列;如果排列以列为基准,就将列从左往右排列。

  • wrap-reverse:如果排列以行为基准,就将行从下往上排列;如果排列以列为基准,就将列从右往左排列。

#box-container {
 flex-wrap: wrap;
}

收缩 Shrink

上面提到的属性都是应用于 flex 容器(flex 子元素的父元素)的。 除此之外,flex 子元素也有很多实用属性。

首先介绍的是 flex-shrink 属性。 使用之后,如果 flex 容器太小,则子元素会自动缩小。 当容器的宽度小于里面所有子元素的宽度之和时,所有子元素都会自动压缩。

子元素的 flex-shrink 接受数值作为属性值。 数值越大,则该元素与其他元素相比会被压缩得更厉害。 比如,一个项目的 flex-shrink 属性值为 1,另一个项目的 flex-shrink 属性值为 3,那么后者相比前者会受到 3 倍压缩。

#box-1 {
 flex-shrink: 1;
}
#box-2 {
 flex-shrink: 2;
}

扩大 Grow

与 flex-shrink 相对的是 flex-grow。flex-grow会在容器太大时对子元素作出调整。

如果一个项目的 flex-grow 属性值为 1,另一个项目的 flex-grow 属性值为 3,那么值为 3 的一个会较另一个扩大 3 倍。

#box-1 {
 flex-grow: 1;
}
#box-2 {
 flex-grow: 2;
}

初始大小 Basis

flex-basis 属性定义了在使用 CSS 的 flex-shrink 或 flex-grow 属性对元素进行调整前,元素的初始大小。

flex-basis 属性的单位与其他表示尺寸的属性的单位一致(px、em、% 等)。 如果值为 auto,则项目的尺寸随内容调整。

#box-1 {
 flex-basis: 10em;
}
#box-2 {
 flex-basis: 20em;
}

简写 Shorthand

上面几个 flex 属性有一个简写方式。 flex-grow、flex-shrink和 flex-basis 属性可以在 flex中一并设置。

例如,flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。

属性的默认设置是 flex: 0 1 auto;。

#box-1 {
flex: 2 2 150px;
}
#box-2 {
flex: 1 1 150px;
}

重新排列 Rearrange

order 属性告诉 CSS flex 容器里子元素的顺序。 默认情况下,项目排列顺序与源 html 文件中顺序相同。 这个属性接受数字作为参数,可以使用负数。

#box-1 {
order: 2;
}
#box-2 {
order: 1;
}

子元素对齐方式 Align

align-self。 这个属性允许调整单个子元素自己的对齐方式,而不会影响到全部子元素。 因为 float、clear 和 vertical-align 等调整对齐方式的属性都不能应用于 flex 子元素,所以这个属性显得十分有用。

align-self 可设置的值与 align-items 的一样,并且它会覆盖 align-items 所设置的值。

#box-1 {
align-self: center;
}
#box-2 {
align-self: flex-end;
}
 

链接: https://www.fly63.com/article/detial/12148

css两端对齐——div+css布局实现2端对齐的4种方法总结

css两端对齐,通过margin负值、justify、space-between、column-count等多种方式来实现css的两端对齐。

flex布局,学习flex弹性布局总结

flex布局(Flexible Box)是对界面css盒模型的一个优化,适应不同尺寸的屏幕,被定义flex的容器可以控制子元素的排列方向和大小,能够用更简单清晰的代码来完成复杂的布局。

html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮

在我们的实际开发中,经常会遇到页面中需要悬浮效果,本文将介绍通过fixed的实现,以及通过原生Js实现滚动到一定位置,实现div的悬浮

理解css中Grid布局,在项目中如何实现grid页面布局

CSS中Grid是一种二维网格式布局方式,Grid是为了解决二维布局问题而创建的CSS模块。使用Gird的好处,Gird在浏览器的兼容性,Grid布局的示例源码...

使用flex实现5种常用布局

flex常用布局:经典的上-中-下布局。在上-中-下布局的基础上,加了左侧定宽 sidebar。左边是定宽 sidebar,右边是上-中-下布局。还是上-中-下布局,区别是 header 固定在顶部,不会随着页面滚动。左侧 sidebar 固定在左侧且与视窗同高,当内容超出视窗高度时,在 sidebar 内部出现滚动条。

你以为 CSS 只是个简单的布局?

本文中,所有的图形都是在单个标签内实现的,大量使用了 CSS3 中的 ::before 、::after 伪元素,transparent 、border,多重线性与径向渐变,多重内外阴影,如果你的效果不尽人意,请尝试在 Chrome 浏览器下预览。

html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰、一目了然能够看清事情发生的过程,UI页面也显示的那么清晰。如何用css+html做出时间轴展示事件点的?

基于jquery 横向/纵向 时间轴插件推荐

这篇文章主要整理一些关于基于jquery,实现横向/纵向时间轴的插件推荐:jquery.jqtimeline插件、timeline.js插件、Timeglider.js插件、Melon HTML5 、jQuery Timelinr、Timeline Porfolio

CSS position 属性_css中常用position定位属性介绍

css可以通过为元素设置一个position属性值,position定位是指定位置的定位,以下为常用的几种:static(静态定位)、relative定位(相对定位)、absolute定位(绝对定位)、fixed(固定定位)、inherit定位

css圣杯布局的实现方式

css圣杯布局思路:外面一个大div,里面三个小div(都是浮动)。实现左右两栏宽度固定,中间宽度自适应。中间栏优先渲染。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!