flex语法

古城微笑少年丶 2022-03-09 10:12 51阅读 0赞

### 1、含义： ###

任何一个容器都可以指定为flex布局，行内元素也可以：inline-flex

注意：webkit内核的浏览器，必须加上-webkit前缀：display：-webkit-flex；flex布局后，子元素的float、clear和vertical-align属性将会失效

### 2、容器的属性 ###

①flex-direction：决定排列方向

值：row、row-reverse、column、column-reverse

②flex-wrap：排列时放不下时，是否换行

值：nowrap、wrap、wrap-reverse

③flex-flow：`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`。

④justify-content：项目在主轴上的对齐方式

值：flex-start、flex-end、center、space-between、space-around

⑤align-items：项目在交叉轴上的对齐方式

值：flex-start、flex-end、center、baseline、stretch（默认全局）

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

值：flex-start、flex-end、center、space-between、space-around

### 3、项目的属性 ###

①order：定义项目的排列方式。数值越小，排列越靠前，默认为0

②flex-grow：定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大。

③flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

④flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。

⑤flex：`flex-grow`, `flex-shrink` 和 `flex-basis`的简写，默认值为`0 1 auto`。后两个属性可选。

⑥align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`。

值：auto | flex-start | flex-end | center | baseline | stretch;

发表评论取消回复

表情：

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

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

相关阅读

相关 flex布局语法

> 欢迎访问我的博客地址 : [博客地址][Link 1] flex布局语法一、flex 布局是什么？ Flex是 Flexible Box 的缩写，意为"弹性

冷不防/ 2024年04月08日 09:12/ 0 赞/ 43 阅读

相关 Flex 布局语法教程

网页布局（layout）是CSS的一个重点应用。 ![aHR0cHM6Ly93d3cucnVub29iLmNvbS93cC1jb250ZW50L3VwbG9hZHMvMjAx

Dear 丶/ 2023年07月11日 12:37/ 0 赞/ 12 阅读

相关 flex正则表达式语法

. 匹配除换行符"/n"外的任意单个字符。 \[\] 匹配括号中字符的任意一个。用"-"指示字符的范围。如果第一个字符是抑扬符号"^"，那么它的含义变为匹配括号内

小咪咪/ 2022年08月08日 12:48/ 0 赞/ 24 阅读

相关 Flex 布局教程：语法篇

作者： [阮一峰][Link 1] 日期： [2015年7月10日][2015_7_10] 网页布局（layout）是CSS的一个重点应用。 ![bg2015071001

柔光的暖阳◎/ 2022年07月16日 00:11/ 0 赞/ 195 阅读

相关 Flex 布局教程：语法篇

转载：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局（layout）是CSS的一个重点应用。 !

待我称王封你为后i/ 2022年07月11日 08:12/ 0 赞/ 203 阅读

相关 Flex 布局教程：语法篇

作者： [阮一峰][Link 1] 日期： [2015年7月10日][2015_7_10] 网页布局（layout）是 CSS 的一个重点应用。 ![bg20150710

青旅半醒/ 2022年06月10日 09:39/ 0 赞/ 239 阅读

相关 Flex 布局语法教程

一、Flex布局是什么？ Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

你的名字/ 2022年05月22日 03:39/ 0 赞/ 212 阅读

相关 Flex 布局教程：语法篇

From: [http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html][http_www.ruanyifeng.com

╰半橙微兮°/ 2022年05月15日 00:17/ 0 赞/ 221 阅读

相关 flex语法

1、含义：任何一个容器都可以指定为flex布局，行内元素也可以：inline-flex 注意：webkit内核的浏览器，必须加上-webkit前缀：display：-

古城微笑少年丶/ 2022年03月09日 10:12/ 0 赞/ 52 阅读

相关 Flex 布局教程：语法篇

网页布局（layout）是CSS的一个重点应用。 ![bg2015071001.gif][] 布局的传统解决方案，基于[盒状模型][Link 1]，依赖 [dis

本是古典何须时尚/ 2021年07月16日 20:44/ 0 赞/ 511 阅读