CSS3弹性盒

骑猪看日落 2022-09-04 11:57 199阅读 0赞

# 定义： #

弹性盒是：CSS3的一个新特性，用于替代浮动的布局手段，没有浮动带来的高度塌陷等问题，同时让元素具有弹性，可以随窗口大小改变而改变。

组成：弹性容器和贪心元素。

弹性容器：开启了diplay:flex（块级弹性容器）或者inline-flex（行内级弹性容器）

弹性元素：弹性容器的**直接**子元素。

一个元素可以即是弹性容器又是弹性元素。

# 弹性容器： #

### flex-direction: ;指定弹性容器中弹性元素的排列方向 ###

*  row，默认值，从左往右
 *  row-reverse，反向，从右往左
 *  column，自上往下
 *  column-reverse，自下往上
 *  主轴：排列方向；侧轴：排列方向的垂直方向。

### flex-wrap:;设置弹性元素在弹性容器中是否自动换行 ###

*  nowrap，默认值，不换行
 *  wrap，沿着辅轴方向换行
 *  wrap-reverse，元素沿着辅轴反方向换行

### fiex-flow:;同时设置方向和换行，即flex-direction和flex-wrap ###

### justify-content:;（主轴）/align-content:;(辅轴)如何分配空白 ###

*  flex-start,沿着主轴起始边排列，空白在最后
 *  flex-end，靠着主轴终边排列，空白在前面
 *  center，元素居中排列
 *  space-around，空白分别到元素两侧
 *  space-between，空白均匀分别在元素间
 *  space-evenly，空白分别到元素单侧

### align-items:;元素在辅助方向如何对齐 ###

*  stretch，将元素的长度设置为相同的值
 *  flex-start，元素不拉伸，沿着辅轴起边对齐
 *  flex-end，沿着辅轴终边对齐
 *  center，居中对齐
 *  baseline，元素基线对齐
 *  拓展：覆盖当前弹性元素的align-items，需要用align-self，属性值一样

# 弹性元素： #

### flex-grow:整数;， ###

*  弹性元素按比例在弹性容器里放大，0则不放大。

### flex-shrink:整数;， ###

*  弹性元素按比例在弹性容器里缩小，0则不缩小。

### flex-basis:;元素基础长度 ###

*  指定元素在主轴方向的长度，可能是高度，也可能是宽度，由主轴确定。
 *  auto时，考虑元素自身的宽高，否则按flex-basis的值确定

### flex:;上面三个值的简写， ###

*  flex: 增长 缩小 基础；
 *  特殊值 initial-->"flex: 0 1 auto"只能缩小
 *  特殊值 auto-->"flex: 1 1 auto"可增可减
 *  特殊值 none-->"flex: 0 0 auto",没有弹性

### order：；决定元素的排序顺序，按数字由小到大排序。 ###

###  ###

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3弹性盒

定义：弹性盒是：CSS3的一个新特性，用于替代浮动的布局手段，没有浮动带来的高度塌陷等问题，同时让元素具有弹性，可以随窗口大小改变而改变。组成：弹性容器和贪心元素。

骑猪看日落/ 2022年09月04日 11:57/ 0 赞/ 200 阅读

相关 CSS3 弹性盒布局说明（CSS3 Flexible Box Layout Explained）

弹性盒布局，或戏称为“flexbox”，是W3C工作草案（W3C Working Draft）很有趣的一部分。Flexbox规范依旧是个待变更的草案，所以你要时刻关注W3C的变

末蓝、/ 2022年08月07日 07:38/ 0 赞/ 184 阅读

相关详解CSS3弹性盒模型---Flexbox

Flexbox 布局它是CSS3新增的一种布局模式。可以很方便地用来改善动态或未知大小的元素的对齐，方向和顺序等等。flex容器的主要特性是它可以调整其子元素的宽度或高度去填充

以你之姓@/ 2022年06月14日 21:57/ 0 赞/ 259 阅读

相关 css弹性盒模型：flex

好文链接： [http://www.cnblogs.com/xiaohuochai/p/5323146.html][http_www.cnblogs.com_xiaohuo

分手后的思念是犯贱/ 2022年06月13日 20:45/ 0 赞/ 199 阅读

相关 CSS3弹性盒布局

> box-fiex兼容性的写法 > \-webkit-box-flex : ;（Safari浏览器，chrome浏览器) > \-moz-box-flex: ;（Fi

古城微笑少年丶/ 2022年06月07日 02:42/ 0 赞/ 215 阅读

相关 CSS3弹性盒模型flex box快速入门

为了做移动端的前端项目开始学flex啦～！用了flex，再也不用担心排版啦。一起来快速上手吧！在css上使用flex的语法如在下面html代码中, ul为父元素，li

骑猪看日落/ 2022年06月01日 08:47/ 0 赞/ 202 阅读

相关 css3盒模型、弹性盒模型、怪异盒模型

一、CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒

ゝ一纸荒年。/ 2022年05月28日 00:58/ 0 赞/ 457 阅读

相关 CSS flex 弹性盒模型

浏览器支持程度 ![这里写图片描述][20181231194650619.png] flex box 弹性盒模型 ![flex box][] 弹性容器使

分手后的思念是犯贱/ 2022年05月25日 06:49/ 0 赞/ 251 阅读

相关 css3弹性盒模型

任何一个容器都可以为其指定为Flex布局。如： .box{ display:flex; } 行内元素： .box{ di

女爷i/ 2022年05月14日 08:23/ 0 赞/ 266 阅读

相关 CSS3 Flexbox 弹性盒与 css3 阴影效果的演示

CSS3 Flexbox 演示 CSS3 Flexbox 弹性盒与 css3 阴影效果的演示 [https://www.html.cn/demo/flexbox

喜欢ヅ旅行/ 2022年02月01日 12:11/ 0 赞/ 291 阅读