flexbox 弹性盒模型

迈不过友情╰ 2022-10-19 04:22 213阅读 0赞

### **轴** ###

**justiy-conten**t 主轴位置

**align-items** 交叉轴位置

**align-content** 多行数据 交叉轴对齐方式

**align-items** 的 属性值：stretch  拉伸 (前提子元素不设置宽或高)

**flex-direction**  排列方式  row横  colum 竖

**flex-wrap:wrap** 溢出换行

**flex-grow:1**  平均分配 （放大比例）

**flex-shrink:0**   缩小比例    值为0时  不进行缩放  数值number

缩放比例：原始数据（宽度）-（原始数据/(各个内部元素原始数据\*缩放数值【有多个则进行相加】)\*缩放数值）\*原始数据

列如：外面大盒子宽400px  三个盒子宽都是200像素    第一个不进行缩放（0）第二个盒子缩放（1） 第三个盒子缩放（3） 计算第三个盒子缩放的多少？

200=600-400    则有200px进行缩小

那么第一个盒子：200\*0  第二个盒子：200\*1  第三个盒子：200\*3

计算公式：200【进行缩放的200px】-( 200【进行缩放的200px】/(200\*0+200\*1+200\*3)\*3【算的第三个盒子因为缩放是3所以乘以3】)\*200【第三个盒子宽度是200px所以要乘以200】

50=200-（200/(200\*0+200\*1+200\*3)\*3)\*200

最终第三个盒子宽为50

**:nth-child(n)\{  \} ** 第几个元素

**flex-basis** 主轴的基准尺寸  优先级大于width宽度（height高度）【max-width  min-width max-height min-heign  优先级大于基准尺寸】

优先级：  max-width/height /min-width/height    大于    flex-basis   大于   width/height

**flex-grow                   flex-shrink             flex-basis**

**flex：**第一个值（放大）  第二个值（缩小） 第三个值（基准尺寸）  列如：flex: 1 2 200px

**order** 顺序

发表评论取消回复

表情：

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

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

相关阅读

相关弹性盒模型

在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box ps：这里遇到了小问题，还没解决。在火狐中，识别不了-moz-box；

Dear 丶/ 2023年06月05日 08:08/ 0 赞/ 29 阅读

相关面试官：说说flexbox（弹性盒布局模型）,以及适用场景？

![fef04a02806a710c6fa0cdca374e395e.png][] 一、是什么 `Flexible Box` 简称 `flex`，意为”弹性布局”，可以

谁借莪１个温暖的怀抱￠/ 2022年11月17日 10:27/ 0 赞/ 130 阅读

相关 flexbox 弹性盒模型

轴 justiy-content 主轴位置 align-items 交叉轴位置 align-content 多行数据交叉轴对齐方式 align-item

迈不过友情╰/ 2022年10月19日 04:22/ 0 赞/ 214 阅读

相关弹性盒模型布局flex

flex是什么? Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 flex得到了所有的浏览器的支持 .box{

Love The Way You Lie/ 2022年10月01日 11:46/ 0 赞/ 237 阅读

相关 Flex弹性盒模型

引言 flex为flexible box的缩写，即弹性布局，利用flex可以对网页进行灵活的布局一个简单的例子 <html> <head>

落日映苍穹つ/ 2022年08月18日 00:44/ 0 赞/ 261 阅读

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

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

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

相关 css弹性盒模型：flex

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

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

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

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

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

相关 CSS flex 弹性盒模型

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

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

相关 css3弹性盒模型

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

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