取值 含义
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. JavaScript：箭头函数：省略写法

    之所以把箭头函数拎出来,是因为它不仅仅是声明函数的一种方式,它还是函数式编程的重要根基,它使得函数的使用更加的灵活,同时,它的语法,也相对于function声明的函数更加灵活和复杂. 箭头函数的省略写 ...

  2. Cesium for Unreal加载倾斜摄影

    本文介绍UE4中通过Cesium插架加载本地倾斜摄影模型.Cesium for Unreal插件运行在UE环境何总运行Cesium,这样方便做一个GIS应用. 安装Cesium for Unreal插 ...

  3. 线性构造treap

    数据结构 线性构造treap treap的线性构造可以使复杂度锐减到\(O(n)\),很优秀 treap的本质就是小根堆+二叉搜索树,即保证val满足搜索树的同时,维护rad的小根堆. 现在我们先把数 ...

  4. Earthdata批量下载MODIS遥感影像的方法

      本文介绍在Earthdata网站中,批量下载MODIS遥感影像的方法.   首先,打开网页:https://search.earthdata.nasa.gov/search ,如果没有Earthd ...

  5. chrome实现下载文件JS代码弹出'另存为'窗口

    1.TXT类型文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. 电脑本地安装不同版本MySQL

    本地已经安装了mysql5.7版本,想测试mysql8版本的用法,想在一台电脑同时配置不同版本的mysql在不同端口号,看起来简单,实现起来其实挺多坑的,总结下实战经验和大家分享下 一.下载安装 下载 ...

  7. Swagger的基本使用

    Swagger简介和使用 使用Swagger你只需要按照它的规范去定义接口及接口相关的信息,再通过Swagger衍生出来的一系列项目和工具,就可以做到生成各种格式的接口文档,以及在线接口调试页面等等. ...

  8. 读Java8函数式编程笔记07_设计和架构的原则

    1. SOLID原则 1.1. 开发良好面向对象程序的准则 1.2. Liskov substitution里氏替换 1.3. Interface segregation接口隔离 1.4. Singl ...

  9. java应用定位高cpu占用几步操作

    1.top获取高cpu占用的pid,如266202.查看pid的线程情况, top -H -p 266203.把cpu高占用的线程号转为16进制,printf "%x" 26652 ...

  10. oasys系统_JAVA代码审计

    oasys系统_JAVA代码审计 一.前言 oasys是一个OA办公自动化系统,使用Maven进行项目管理,基于springboot框架开发的项目.可以看到该项目的资源文件中是mappers且pom. ...