取值 含义
order 可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0
flex-grow 属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间即使除去元素外的剩余的空白空隙。默认值为0
flex-shrink 属性中的shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1。0为不收缩。
flex-basis flex-basis定义了在分配剩余空间之前元素的默认大小(优先级高于width，当设置的值大于剩余容器的时候将只会充满容器)
flex flex属性是flex-grow，flex-shrink和flex-basis的缩写
align-self align-self指控单独某一个flex子项的垂直对齐方式 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<style>

    .box{width: 300px;height: 300px;border: 1px red solid;margin: 0 auto;display: flex;}

    .box div{width: 50px;height: 50px;background-color: rgb(20, 71, 223);line-height: 50px;text-align: center;}

    /* .box div:nth-child(2){order: 1;}

    .box div:nth-child(3){order: -1;} */

    .box div:nth-child(2){flex-grow: 1;background-color: seagreen;}

    .box div:nth-child(3){flex-grow: 3;background-color: saddlebrown;}

    .box2{width: 300px;height: 300px;border: 1px red solid;margin: 0 auto;display: flex;}

    .box2 div{width: 50px;height: 50px;background-color: rgb(20, 71, 223);line-height: 50px;text-align: center;}

    .box2 div:nth-child(2){background-color: seagreen;flex-shrink: 0;}

    .box2{width: 300px;height: 300px;border: 1px red solid;margin: 0 auto;display: flex;}

    .box2 div{width: 50px;height: 50px;background-color: rgb(20, 71, 223);line-height: 50px;text-align: center;}

    .box2 div:nth-child(2){background-color: seagreen;

    /* width: 100px;flex-basis: 150px; */

    /* flex: 0 1 auto; */

    align-self: center;

    }

</style>

<body>

    <!-- <div class="box">

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

        <div>5</div>

    </div> -->

    <!-- <div class="box2">

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

        <div>5</div>

        <div>3</div>

        <div>4</div>

        <div>5</div>

    </div> -->

    <div class="box2">

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

        <div>5</div>

    </div>

</body>

</html>

demo

前端回血day24 flex子项伤的CSS属性的更多相关文章

  1. 【干货分享】前端面试知识点锦集02（CSS篇）——附答案

    二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding ...

  2. 前端布局之Flex语法

    前端布局一直是CSS的一个重点应用,然而基于盒子模型的传统布局方案,依赖display + position + float 属性,对于某些特殊的布局非常不方便,比如:垂直居中就不容易实现.针对这一情 ...

  3. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  4. Front End Developer Questions 前端开发人员问题（二）CSS 后续

    问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 31.视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再 ...

  5. 前端开发【第2篇：CSS】

    鸡血 样式的属性多达几千个,但别担心,按照80-20原则,常用的也就几十个,你完全可以掌握它. Css初识 HTML的诞生 早期只有HTML的时候为了让HTML更美观一点,当时页面的开发者会把颜色写到 ...

  6. 大前端学习笔记【七】关于CSS再次整理

    如果你在日常工作中使用 CSS,你的主要目标可能会重点围绕着使事情“看起来正确”.如何实现这一点经常是远不如最终结果那么重要.这意味着比起正确的语法和视觉结果来说,我们更少关心 CSS 的工作原理. ...

  7. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  8. 前端学习笔记之CSS属性设置

    CSS属性设置   阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...

  9. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  10. 前端常用面试题目及答案-HTML&CSS篇

    1. 行内元素和块级元素有哪些? 行内元素: 123456789101112131415161718192021222324252627 <a>     //标签可定义锚   <ab ...

随机推荐

  1. 痞子衡嵌入式：对比恩智浦全系列MCU(包含Kinetis/LPC/i.MXRT/MCX)的GPIO电平中断设计差异

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦全系列MCU(包含Kinetis, LPC, i.MXRT, MCX)的GPIO电平中断设计差异. 在痞子衡旧文 <以i.M ...

  2. 【转载】EXCEL VBA-区域选择

    1- 区域命名 ThisWorkbook.Names.Item("foo").RefersTo =Tabelle1!$A$1:$B$1 ThisWorkbook.Names.Ite ...

  3. CF构造题1600-1800（2）

    H. Hot Black Hot White(COMPFEST 14 - Preliminary Online Mirror (Unrated, ICPC Rules, Teams Preferred ...

  4. 记OPNsense防火墙的安装过程 - 安全

    前些天在网上看到防火墙软件OPNsense,对其有了兴趣,以前写过一个其前面的一个软件M0n0wall( 关于m0n0wall的安装及配置 ),当时也是非常有名的防火墙,现在有了OPNsense,这个 ...

  5. 大数据实时多维OLAP分析数据库Apache Druid入门分享-上

    @ 目录 概述 定义 MPP和Lambda补充说明 概述 特征 适用场景 不适用场景 横向对比 部署 单机部署 入门示例 概述 定义 Apache Druid 官网地址 https://druid.a ...

  6. windows右键菜单扩展

    今天给大家分享一个我做的小工具,可以自定义扩展右键菜单的功能来提高工作效率,效果图如下: image 如上图,右键菜单多了几个我自定义的菜单 复制文件路径 复制文件夹路径 我的工具箱 <走配置文 ...

  7. 多线程之Semaphore登录限流示例

    public static void main(String[] args) { //允许最大的登录数 int slots=10; ExecutorService executorService = ...

  8. 2.1.新建项目及项目目录和预览uni项目

    目录结构 一个uni-app工程,默认包含如下目录及文件 static目录 使用注意 编译到任意平台时,static 目录下除不满足条件编译的文件,会直接复制到最终的打包目录,不会打包编译.非 sta ...

  9. 树莓派4B安装OPENCV4.0

    参考 : https://www.pyimagesearch.com/2018/09/26/install-opencv-4-on-your-raspberry-pi/ Step #1: Expand ...

  10. SQL 实现全字段分组，每组取一条记录，记录满足：组内时间最大，组内不同类型数量求和

    1 SELECT 2 TT.CLASS_ID AS "classId", 3 TT.TEMPLATE_ID AS "templateId" , 4 TT.MSG ...