flexbox 弹性盒模型

轴

justiy-content 主轴位置

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 顺序

flexbox 弹性盒模型相关推荐

Flexbox弹性盒模型
Flexbox叫弹性盒模型,它的使用场景主要是屏幕自适应布局和取代浮动布局. 细节性的知识需要大量实践,系统性的知识则需要真正理解系统.我认为Flexbox就属于系统性的知识.所以这篇文章从概念入手, ...
React Native - FlexBox弹性盒模型
FlexBox布局 1. 什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫FlexBox,意为"弹性布局",旨在通过弹性的方式来对 ...
（转）详解css3弹性盒模型（Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
弹性盒模型（flex-box）
弹性盒模型(display:flex) 在我们做移动端项目的时候,弹性盒模型经常会用到,初学者经常会搞不清它的属性.下面主要了解一下弹性盒子的五个属性. 1. flex-direction:指定弹性子 ...
弹性盒模型 Flex
1. 什么是弹性盒模型传统布局基本依靠display float position来完成,有些特殊的布局写起来不太方便. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当 ...
CSS3弹性盒模型之box-orient box-direction
Css3引入了新的盒模型--弹性盒模型,其实上一篇文章已经讲到了一个box-flex,今天来讲讲另外的两个弹性盒模型属性box-orient 和 box-direction. 1.box-origen ...
css3教程：弹性盒模型
Css3引入了新的盒模型--弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...
CSS3 Flexbox 弹性盒与 css3 阴影效果的演示
CSS3 Flexbox 演示 CSS3 Flexbox 弹性盒与 css3 阴影效果的演示 https://www.html.cn/demo/flexbox-playground/
flex 会使div撑满_如何讲清楚Flex弹性盒模型(中)？
上一篇我们讲解了, flex容器的属性, 如何定义主轴方向, 以及主轴侧轴对齐方式这篇讲解子元素的一些属性. 如何对子项目进行排序? 弹性盒模型第一次可以让我们方便的对元素进行排序使用 order ...

flexbox 弹性盒模型

轴

flexbox 弹性盒模型相关推荐

最新文章

热门文章