取值 含义
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. [深度学习] tf.keras入门4-过拟合和欠拟合

    过拟合和欠拟合 简单来说过拟合就是模型训练集精度高,测试集训练精度低:欠拟合则是模型训练集和测试集训练精度都低. 官方文档地址为 https://tensorflow.google.cn/tutori ...

  2. JS加载层

    花了些时间封装了一个JS类,内置9种图标样式,全局主要样式可自定义. 转载请附上本文链接! 全局配置 { "msg": "文字,默认: "loading...& ...

  3. 迁移学习（MixMatch）《MixMatch: A Holistic Approach to Semi-Supervised Learning》

    论文信息 论文标题:MixMatch: A Holistic Approach to Semi-Supervised Learning论文作者:David Berthelot, Nicholas Ca ...

  4. 软件安装——tortoiseGit安装和配置

    Tortoisegit安装指南 TortoiseGit是一个开放的Git版本控制系统的源客户端,它是Git和Windows资源管理器的整合,提供了Git的图形化操作界面 一.软件安装 1.进入tort ...

  5. Java基础篇——常用类

    Objec类 Test t1 = new Test(); Test t2 = new Test(); //toString方法,对某个对象的字符串输出 //getClass方法,返回该对象的Class ...

  6. [数据结构]克鲁斯卡尔（Kruskal）算法

    算法的概念 与Prim算法从顶点开始扩展最小生成树不同,Kruskal算法是一种按权值的递增次序选择合适的边来构造最小生成树的方法.假设N=(V,E)是连通网,对应的最小生成树T=(Vt,Et),Kr ...

  7. SOFAJRaft源码阅读-模块启动过程

    本篇文章旨在分析SOFAJRaft中jraft-example模块的启动过程,由于SOFAJRaft在持续开源的过程中,所以无法保证示例代码永远是最新的,要是有较大的变动或者纰漏.错误的地方,欢迎大家 ...

  8. angular Ionic CLI环境搭建安装以及栅格响应式布局

  9. Unity之语音识别

    Unity之语音识别 前言 开篇 Unity版本及使用插件 正题 写脚本 挂载到游戏场景中 结尾 唠家常 今日无推荐 前言 开篇 今儿心情好,哈哈哈哈哈 今天小黑给大家带来Unity的语音识别功能,超 ...

  10. python自动发布

    import os import paramiko baseconfig = { "ip": "121.4.38.187", "port": ...