取值 含义
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. uniapp中请求接口问题

    在main.js文件中配置: //Vue.prototype.$baseUrl="http://192.168.1.164/api" //线下接口 Vue.prototype.$b ...

  2. 【转载】EXCEL VBA 中的Range.offset和Range.resize

    在Excel VBA中range.offset和range.resize均可以重新选择区域,但range.offset表示偏移且偏移后尺寸不改变,range.resize则会根据输入的行数和列数重新定 ...

  3. 使用Jiralert实现AlertManager告警对接Jira

    简介 Alertmanager 处理由客户端应用程序(如 Prometheus server)发送的警报.它负责去重(deduplicating),分组(grouping),并将它们路由(routin ...

  4. ArcGIS插件 - 易至天工影像加载插件

    众所周知,谷歌地图由于其分辨率高.更新速度快,且一直免费,受到行业内外各种人士的青睐,也正因如此,有人利用,有人嫉妒,导致它在国内市场无法再继续下去了.各大相关软件产商也主动或被动下架相关服务,可还是 ...

  5. python之路38 SQL注入问题 索引触发器 事务 存储过程 函数 流程控制

    SQL注入问题 怪像1:输对用户名就可以登录成功 怪像2:不需要对的用户名和密码也可以登录成功 SQL注入:利用特殊符号的组合产生特殊的含义 从而避开正常的业务逻辑 select * from use ...

  6. Blazor WebAssembly的初次访问慢的优化

    Blazor WebAssembly初次访问需要加载很多dll,体积较大,因此第一次加载比较慢. 针对此问题Microsoft提供了优化方案:压缩 https://learn.microsoft.co ...

  7. 使用SQL4Automation让CodeSYS连接数据库

      摘要:本文旨在说明面向CodeSYS的数据库连接方案SQL4Automation的使用方法. 1.SQL4Automation简介 1.1.什么是SQL4Automation   SQL4Auto ...

  8. 【转】C#接口知识

    参考:日常收集 C# 接口知识 (知识全面) 目录 第一节 接口慨述 第二节 定义接口 第三节 定义接口成员 第四节.访问接口 第五节.实现接口 第六节.接口转换 第七节.覆盖虚接口 第一节 接口慨述 ...

  9. Ubuntu 安装 Anaconda

    下载 anaconda 官网 https://repo.anaconda.com/archive/ 国内镜像 https://mirrors.bfsu.edu.cn/anaconda/archive/ ...

  10. What's new in Dubbo 3.1.5 and 3.2.0-beta.4

    在 1 月 27 日,新年伊始,Dubbo 3.1.5 和 3.2.0-beta.4 正式通过投票发布.本文将介绍发布的变化一览. Dubbo 3.1.5 版本是目前 Dubbo 3 的最新稳定版本, ...