flex布局

一，css部分，大致可以问的几处地方 盒模型 组成 content+ border + padding + margin 标准盒模型（用box-sizing:content-box;），IE模型(box-size: border-box) 垂直居中方法（方法太多了，随便举几个） 　　　1.display: flex; 　　　2. position:absolute; 　　　3, transform 三栏布局 (放几个常见的) float flex position 选择器权重计算方式 id > class > 标签选择器 行内样式 > 内联 > 外部链接 important 优先级最高 清除浮动的方法 外层div上加 overflow:hidden 外层div 上加：after 伪类 .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1; } 使用before和after双伪元素清除浮动 display: table, content: ' ', clear: both 末尾加div clear:both flex 这个布局讲起来太多东西了，值得仔细研究 ( http:

align-items和align-content的区别 2019-10-21 16:01 西北偏北&雨曦 本文引自： https://blog.csdn.net/cc18868876837/article/details/88138057 文章目录 1. stack overflow上的回答（翻译） 2. 自己动手实践 2.1 子项为单行的情况 2.1.1 flex容器不设置高度 2.1.2 flex容器设置高度 2.2 子项为多行的情况 2.2.1 flex容器不设置高度 2.2.2 flex容器设置高度 2.3 补充 3. 总结 在用flex布局时，发现有两个属性功能好像有点类似：align-items和align-content，乍看之下，它们都是用于定义flex容器中元素在交叉轴（主轴为flex-deriction定义的方向，默认为row，那么交叉轴跟主轴垂直即为column，反之它们互调，flex基本的概念如下图所示）上的对齐方式，那么它们之间有什么区别呢？ 本文通过实例代码来对此展开研究（flex-direction默认为水平方向，环境为google浏览器：版本 72），主要分为三部分： ① 翻译stack overflow的好的回答。 ② 自己代码实例展示差别。 ③ 总结。 注：本文只限属性取值为center的情况，其他属性值请自己尝试。 1. stack

从大的分类上讲，display的32种写法可以分为6个大类，再加上一个全局类，一共是7个大类： 1 外部值 2 内部值 3 列表值 4 属性值 5 显示值 6 混合值 7 全局值 一 外部值 所谓外部值，就是说这些值只会直接影响一个元素的外部表现，而不影响元素里面的儿子级孙子级元素的表现。 display: block; 这个值大家不陌生，我们最熟悉的 <div>缺省就是这个值，最基本的块级元素，属于 css入门初学者都知道的概念，只要是容器类型的元素基本都是这个值。除 <div>之外，还有 <h1>到 <h6>， <p>， <form>， <header>， <footer>， <section>， <article>天生都是这个值。 display: inline; 这个值大家也不陌生，行内元素嘛，只要是个行内元素都是这个值，最典型的是 <span>，还有 <a>， <img>，以及古代 html语言当中的 <b>， <i>都属于这一类型。 display: run-in; 这个值有点奇怪，通常没人用它，但你可以知道它。因为除了 IE和 Opera支持它以外，其他所有主流浏览器包括 Chrome, Safari, Firefox全都对它置若罔闻。这东西说白了也没什么神秘，它的意思就是说如果我们命令一个元素 run-in，中文意思就是『 闯入』！那么这个元素就直接闯入下一行。 二

Flex布局 一、什么是Flex布局？ Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。 任何一个容器都可以指定为Flex 布局。 1 2 3 .box{ display :flex; } 　　行内元素也可以使用Flex布局。 1 2 3 .box{ display :inline-flex; } 　　webkit内核的浏览器，必需加上-webkit前缀 1 2 3 4 .box{ display :-webkit-flex; display :flex; } 　　需要注意的是，设为flex布局以后，子元素的float、clear和vertical-align属性将失效 二、基本概念 采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框 的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 三

布局： <div className={Styles.filterbox}> <div className={Styles.itme}> <span className={Styles.control} style={{ width:'210px'}}> <Input placeholder="请输入物品名称/品牌" /> </span> </div> <div className={Styles.itme}> <span className={Styles.control} style={{ width:'150px'}}> <Input placeholder="批号" /> </span> </div> <div className={Styles.itme}> <span className={Styles.control}> <span className={Styles.label}>有效期至：</span> <DatePicker dateRender={current => { const style = {}; if (current.date() === 1) { style.border = '1px solid #1890ff'; style.borderRadius = '50%'; } return ( <div className="ant

1 .flex 布局两端对齐当最后一排数量不够时，会出现以下布局情况 实现效果： 解决方案：使用after伪类, 解决最后一排数量不够两端分布的情况。宽度就是每张图片的宽度 .list:after { content: ""; width: 1.87rem; } 2.flex布局的元素会有默认间隙（垂直间隙） 效果图： 解决方案：使用align-content:flex-start解决 附上所有有关代码参考： .list { width: 100%; display: flex; justify-content: space-between; flex-flow: row wrap; margin: 0 0.53rem; padding-bottom: 0.67rem; align-content: flex-start; // 解决flex布局的元素会有默认间隙（垂直间隙） li { img { width: 1.87rem; height: 1.87rem; margin-top: 0.67rem; } } } .list:after { content: ""; width: 1.87rem; } } 来源： https://www.cnblogs.com/Awen71815iou/p/11670228.html

flex:1和flex:auto详解 首先明确一点是， flex 是 flex-grow 、 flex-shrink 、 flex-basis 的缩写。 flex-grow 属性定义项目的放大比例，默认为 0 ，即如果存在剩余空间，也不放大。 flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto ，即项目的本来大小。 故其取值可以考虑以下情况： flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。同理，如下是等同的： .item {flex: 2333 3222 234px;} .item { flex-grow: 2333; flex-shrink: 3222; flex-basis: 234px; } 当 flex 取值为 none ，则计算值为 0 0 auto，如下是等同的： .item {flex: none;} .item { flex-grow: 0; flex-shrink: 0; flex-basis: auto; } 当 flex 取值为 auto ，则计算值为 1 1 auto，如下是等同的：

我们在编写网页代码时，首先应该做的就是设计好页面的布局形式，然后再往里面填充内容。网页布局的好与坏，直接决定了网页最终的展示效果。PC端常见的网页布局形式有两列布局、三列布局等。在CSS中，我们通常使用浮动(float)、定位(position)、显示模式(display)相关属性结合使用，以达到预期效果。 一　　文档流 　　文档流就是HTML文档内所有元素按照一定规律排列并显示的形式。 　　CSS文档流大致可以分为3种：标准流，浮动流，定位流。 　　 1，标准流 　　默认情况下，HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素，行内元素，行内块级元素，他们的特性是块级独占一行，行内和行内块级可以在一行内共存，这些特性都是针对标准流的。总结一下就是，标准流中元素只能在水平或垂直方向上排版。如果元素是块级元素, 那么就会垂直排版，如果元素是行内元素/行内块级元素, 那么就会水平排版。 　　 2，浮动流 　　浮动流只有一种排版方式, 就是水平排版。 它只能设置某个元素在父元素内左对齐或者右对齐。设置了浮动的元素， 将脱离标准流 ，之后它将无视元素的display属性，并且都被当做块级元素处理。 1 div{ 2 float:left;/*规定元素向左浮动*/ 3 /*float:right;规定元素向右浮动*/ 4 } 　　请注意，浮动float属性没有center取值

flex布局：弹性布局 采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。 flex容器：display: flex flex容器属性： 1.flex-direction属性决定主轴的方向（即项目的排列方向）。 .box{ flex-direction:row | row-reverse | column | column-reverse; } 2.flex-wrap属性定义，如果一条轴线 排不下，如何换行？ .box{ flex-wrap: nowrap | wrap | wrap-reverse; } 它可能去三个值。 （1）nowrap（默认）：不换行 （2）wrap:换行，第一行在上方 （3）wrap-reverse:换行，在第一行的下方 3. flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap。 .box{ flex-flow:<flex-direction> || <flex-wrap>; } 3.4 justify-content属性 justify-content属性定义了项目在主轴上的对齐方式 .box{ justify-content:flex

/*--> */ /*--> */ flex-direction flex-direction : row | row-reverse | column | column-reverse ; row （默认值）：主轴为水平方向，起点在左端。 row-reverse ：主轴为水平方向，起点在右端。 column ： 。 column-reverse ：主轴为垂直方向，起点在下沿。 flex-wrap flex-wrap : nowrap | wrap | wrap-reverse ; （ 1 ） nowrap （默认）：不换行。 （ 2 ） wrap ：换行，第一行在上方。 （ 3 ） wrap-reverse ：换行，第一行在下方。 flex-flow flex-flow : < flex-direction> || < flex-wrap> ; justify-content justify-content : flex-start | flex-end | center | space-between | space-around ; flex-start （默认值）：左对齐 flex-end ：右对齐 center ： 居中 space-between ：两端对齐，项目之间的间隔都相等。 space-around ：每个项目两侧的间隔相等。所以