Flex弹性盒子的项目属性

1、align-self 项目对齐方式

（1）align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式。

（2）取值

auto（默认值）：和父元素align-self的值一致，具有继承性

flex-start：该项目顶端对齐

flex-end：该项目底部对齐

center：竖直方向上居中对齐

baseline：item第一行文字的底部对齐

stretch：当item未设置高度时，item将和容器等高对齐

（3）上机实例

      .box{width: 500px;height: 500px;display: flex;align-items: center;justify-content: center;background-color: #ccc;}.box .box1{width: 100px;height: 100px;}.box .box1:nth-of-type(1){background-color: pink;}.box .box1:nth-of-type(2){background-color: skyblue;align-self: flex-start; 该项目居上排列 /* align-self: flex-end; 该项目居下排列 *//* align-self: center; 该项目居中排列 *//* align-self: auto; 默认值 继承父元素 *//* align-self: baseline;与第一个项目的第一行文字对齐 */}.box .box1:nth-of-type(3){background-color: orange;}

（4）运行效果

2、order 项目排列方式

（1）order属性设置项目排序的位置，默认值为0，数值越小越靠前，可以为正，可以为负

（2）上机实例

  .box .box1{width: 100px;height: 100px;}.box .box1:nth-of-type(1){background-color: pink;order: 0;}.box .box1:nth-of-type(2){background-color: skyblue;order: -8;}.box .box1:nth-of-type(3){background-color: orange;order: 5;}

（3）运行结果

3、flex-grow 项目大小比例

（1）flex-group属性用来

控制当前项目是否放大显示。默认值为0

（2）上机实例

  .box .box1{width: 100px;height: 100px;}.box .box1:nth-of-type(1){background-color: pink;}.box .box1:nth-of-type(2){flex-grow: 2;}.box .box1:nth-of-type(3){background-color: orange;flex-grow: 1;}

（3）运行效果

4、flex-shrink 项目缩小比例

（1）flex-shrink属性表示元素的缩小比例。默认值为1，如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0，则空间不足时该项目也不缩小。

（2）上机实例

.box .box1{width: 200px;height: 200px;}.box .box1:nth-of-type(1){background-color: pink;flex-shrink: 2;}.box .box1:nth-of-type(2){background-color: skyblue;flex-shrink: 0;}.box .box1:nth-of-type(3){background-color: orange;flex-shrink: 1;}

（3）运行效果

5、flex 简写

（1） flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto；

（2）取值

auto：等价于 1 1 auto。也就是允许增长，允许缩小，宽度为自动。

none：等价于 0 0 auto。也就是不允许增长，不允许缩小，宽度为自动。

非负数字：这个数字表示的是 flex-grow的值， flex-shrink为1，表示允许缩小。

(3）上机实例

.box .box1{width: 200px;height: 200px;}.box .box1:nth-of-type(1){background-color: pink;flex: 1;/* flex:0 1 auto;默认值 */}.box .box1:nth-of-type(2){background-color: skyblue;/* flex: auto; 等价于  1 1 auto。也就是允许增长，允许缩小，宽度为自动。 */}.box .box1:nth-of-type(3){background-color: orange;/* flex: none; 等价于  0 0 auto。也就是不允许增长，不允许缩小，宽度为自动。 */}

（4）运行效果

Flex弹性盒子的项目属性相关推荐

Vue.js-Day08【项目实战(附带完整项目源码)-day03：订单确认页面、美团支付页面、flex弹性盒子布局】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
flex html 页面移动,HTML页面布局之flex弹性盒子
这里是修真院前端小课堂,本篇分析的主题是 [HTML页面布局之flex弹性盒子] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...
Flex弹性盒子（一篇带你掌握潮流 Flex 布局）
文章目录 Flex弹性盒子 1.说在前头 1.1.Flex布局出现之前 1.2.Flex布局出现后 2.什么是Flex布局? 3.Flex container/item(父/子容器)的常用属性 4.L ...
flex弹性盒子flex-grow 和flex的区别
在flex弹性盒子体系中,flex-grow和flex都有对子元素进行放大的作用,但是这两个属性在放大时的计算方法不同,在使用时候要注意,使用正确的放大属性,从而达到自己想要的效果. 这是一个宽700 ...
Flex弹性盒子详解：从量变到质变的理解
Flex弹性盒子在前端css3中有个非常重要的属性,就是弹性盒子了,他在页面布局中起到的作用可谓是有着王霸之业,那么我们如何正确的使用flex布局呢?让我来介绍一下吧.我们可以将整个flex布局分成 ...
浅析flex弹性盒子伸缩比
之前在做移动端内容左右滑动时,被flex属性绕晕了.说实话,在网上看了很多讲述flex属性的相关博客,说的非常复杂,不如自己总结的香.今天用一篇博客带你玩转flex属性! 准备工作弹性容器开启弹性布 ...
flex弹性盒子中flex-grow与flex的区别
flex弹性盒子中flex-grow与flex的区别大家在使用flex布局的时候很多情况下都会用到flex-grow这个属性, flex-grow 属性用于设置父元素剩余空间的瓜分比例, flex ...
CSS 属性篇(四)：Flex弹性盒子
一.Flex介绍 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局: .box{disp ...

Flex弹性盒子的项目属性

1、align-self 项目对齐方式

2、order 项目排列方式

3、flex-grow 项目大小比例

4、flex-shrink 项目缩小比例

5、flex 简写

Flex弹性盒子的项目属性相关推荐

最新文章

热门文章