css display flew 伸缩盒模型

父级容器属

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/**父级的几个属性flex-direction ——》 属性决定主轴的方向（横着还是竖着）  row | row-reverse | column | column-reverse;flex-wrap-》  一行排不下是否换行 nowrap | wrap（换行 第一行在上） | wrap-reverse（换行第一行在下）;flex-flow -》上面两个属性的集合justify-content-》 属性定义了项目在主轴（x轴）上的对齐方式。flex-start(左端对齐) |flex-end（右端对齐） |center（居中对齐） |space-between （ 每一排 左右盒子紧挨边界盒子们间距相等）|space-around;（ 每一排 每个盒子左右两侧间距恒等）align-items-》 属性定义项目在交叉轴(Y轴)上如何对齐。flex-start （顶部对齐 注意 ：如  flex-wrap：column-reverse，则底部对齐）|------------------------flex-end （底部对齐）|center | (上下居中)baseline （文字基线对齐）|stretch （盒子高变为父级宽，设置了敢赌除外）;align-content -》属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。(适用于非一条x垂直对齐方式)flex-start （顶部对齐）|flex-end 底部对齐|center 垂直居中|space-between垂直居中（上下紧挨着顶与低） |space-around 垂直对齐 上下间距相等 |stretch;轴线占满整个交叉轴。(每行下间距相等 首行顶部挨顶)*/* {margin:0;padding: 0;list-style: none;}.wrap{width: 100%;height: 800px;background-color: #fcfccc;}ul{display: flex;flex-flow: row wrap;justify-content:  space-around;align-items: baseline;height: 800px;align-content:stretch;}li{flex-grow: 1;margin: 3px;background-color: red;text-align: center;min-width: 300px;max-width: 500px;}</style>
</head>
<body><div class="wrap"><ul><li>01</li><li>01</li><li>01</li><li>01</li><li>01</li><li>01</li><li>01</li><li>01</li><li>01</li><li>01</li><li>01</li><li>01</li><li>01</li><li>01</li><li style="height: 100px;padding-top: 30px">02</li><li>03</li><!--<li>04</li>--><!--<li>05</li>--><!--<li>07</li>--></ul>
</div>
</body>
</html>

注意：当父级 display:flew ;子级无 display :flew-grow：1；子级大小等于盒子大小 -------父级样式生效

每个子级的属性

转载于:https://www.cnblogs.com/aqigogogo/p/7953769.html

css display flew 伸缩盒模型相关推荐

Webkit Flex伸缩盒模型属性备忘
一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器,其包含的子元素是伸缩项目. flex是一个复合属性.Flexbox伸缩布局盒模型中的伸缩容器及伸缩特性定义. ...
转：Webkit Flex伸缩盒模型属性备忘
一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器,其包含的子元素是伸缩项目. flex是一个复合属性.Flexbox伸缩布局盒模型中的伸缩容器及伸缩特性定义. ...
CSS基础语法和盒模型
CSS基础语法和盒模型 CSS简介 Cascading Style Sheet 层叠样式表用于给HTML标签添加样式 CSS3是CSS的最新版本增加了大量的样式/动画/3D特效以及移动端特性前端 ...
css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
flex弹性盒子(伸缩盒模型)的使用
伸缩盒布局 1 伸缩容器和伸缩项目伸缩容器: 一个元素设置 CSS 属性 display:flex 或者 display: inline-flex,该元素就变为伸缩容器. 伸缩项目: 伸缩容器的子元 ...
CSS 常用语法与盒模型分析
CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector {property: value;property: value;... property: value ...
CSS之布局（盒模型）
盒模型: <!DOCTYPE html> <html><head><meta charset="UTF-8"><title&g ...
css盒模型只能应用于html,iframe，css样式表，盒模型的使用方法-2019年9月3日
实例演示:标签的使用实例演示: css样式设置的优先级实例演示: css的id, class与标签选择器的使用规则实例演示盒模型的五大要素: width, height, padding, bo ...
DIV + CSS 学习笔记（盒模型）
本文目录一.盒模型 (一)盒边框(border) (二)内边距(padding) (三)外边距(margin) (四)盒内容(element) (五)盒模型计算 (六)块级元素与内联元素的区别和转换 ...

css display flew 伸缩盒模型

父级容器属

每个子级的属性

css display flew 伸缩盒模型相关推荐

最新文章

热门文章