flex布局

引言 又是一年寒冬季，只身前往沿海工作，也是我第一次感受到沿海城市冬天的寒冷。刚过完金九银十，经过一场惨烈的江湖厮杀后，相信有很多小伙伴儿已经找到了自己心仪的工作，也有的正在找工作的途中。考虑到年后必定又是一场不可避免的厮杀，这里提前记录一下自己平时遇到和总结的一些知识点，自己巩固复习加强基础的同时也希望能在你的江湖路上对你有所帮助。笔者在入职最近这家公司之前也曾有过长达3个月的闭关修炼期，期间查阅资料无数，阅读过很多文章，但总结下来真正让你印象深刻的，不是那些前沿充满神秘感的新技术，也不是为了提升代码逼格的奇淫巧技，而是那些我们经常由于项目周期紧而容易忽略的基础知识。 所谓万丈高楼平地起，只有你的地基打得足够牢固，你才有搭建万丈高楼的底气，你才能在你的前端人生路上越走越远 。 这篇主要是先总结一下CSS相关的知识点，可能某些部分不会涉及到太多具体的细节，主要是对知识点做一下汇总，如果有兴趣或者有疑惑的话可以自行百度查阅下相关资料或者在下方评论区留言讨论，后续文章再继续总结JS和其他方面相关的知识点，如有不对的地方还请指出。 1. CSS盒模型 CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型

display:grid; 一： 常见的容器属性 1、 display:grid 定义一个容器属性为网格布局 2、 grid-template-columns: 100px 100px 100px 表示创建三列,每列的宽度是 100px 3、 grid-template-columns: repeat(3, 1fr) 表示创建三列,每列平均分配 4、 grid-template-columns: 150px 100px 50px 1fr; 表示创建四列,最后一列占全部剩余的位置 5、 grid-template-rows: 50px 50px 表示创建两行,每行的高度是 50px 6、行其他的也可以跟列一样的 7、 grid-gap: 1px; 表示每个项目之间的间隙 二： 常见的项目属性 1、 grid-column-start: 1; 表示该项目所开始的位置(从最左边开始) 2、 grid-column-end: 4; 表示该项目所结束的位置 3、上面1和2的简写可以是 grid-column: 1 / 4; 4、 grid-row-start: 2; 类似上面的列的处理一样的 5、 grid-row-end: 4; display:flex; 一： 常见的容器属性 1、flex-direction 决定项目是水平排列还是垂直排列 row 水平排列 row-reverse

html： <div class="parent"> <div class="son">1</div> <div class="son">2</div> <div class="son">3</div> <div class="son">4</div> </div> css： .parent{ width: 600px; height: auto; border: 10px solid black; display: flex; /*flex-direction: row; //水平排列（默认）*/ /*flex-direction: column; //垂直排列*/ /*flex-wrap: wrap;//换行*/ /*flex-wrap: nowrap;//不换行（默认）*/ /*justify-content: center;//居中排列*/ /*justify-content: flex-start //靠左排列*/ /*justify-content: flex-end //靠右排列*/ /*justify-content: space-between; //两端对齐,中间间隔相等*/ /*justify-content: space-around; //每个元素两侧间隔相等,所以中间比两端间隔大一倍*/ /*align-items: center; //在竖直方向居中*

flex布局开发 布局原理 flex时flexible Box的缩写，意为“弹性布局”，用来为盒子模型提供最大的灵活性，任何一个容器都可以定位flex布局 【注意】 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 常见父项属性 flex-direction：设置主轴的方向 flex-direction属性值决定主轴的方向（及项目的排列方向） 【注意】 主轴和侧轴是会变化的，就看flex-diretion设置谁为主轴，剩下的就是侧轴，子元素是跟着主轴来排列的 属性值 说明 row 默认值从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从上到下 justify-content：设置主轴上的子元素排列方式 【注意】 使用这个属性之前要确定好主轴是哪个 属性值 说明 flex-start 默认值 从头部开始 如果主轴是x轴，则从左到右 flex-end 从尾部开始排列 center 在主轴居中对齐 space-around 平分剩余空间 space-between 先两边贴边 在平分剩余空间 flex-wrap：设置子元素是否换行 属性值 说明 nowrap 默认值，不换行 wrap 换行 align-content

最重要的一点是：对于flex容器， 一定要给父容器设置定宽定高 。否则将达不到想象中的效果。 flex布局基本要求 display：flex/inline-flex; 设置这个属性后float、clear、vertical-align属性将失效。 flex盒子的属性 属性一：flex-direction属性决定主轴的方向（即项目的排列方向）。 　　row | row-reverse | column | column-reverse; 最常用的row、column 属性二：flex-wrap属性决定如果一条轴线排不下，如何换行。 属性值分别是：不换行、换行且第一行在上方、换行且第一行在下方。 .box{ flex-wrap: nowrap | wrap | wrap-reverse; } 属性三：flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。即水平排列且不换行。 .box { flex-flow: <flex-direction> || <flex-wrap>; } 属性四：justify-content 属性定义了项目在主轴上的对齐方式。（这个属性对于居中来说非常重要，经常会用到） flex-start | flex-end | center | space-between | space-around

引言 又是一年寒冬季，只身前往沿海工作，也是我第一次感受到沿海城市冬天的寒冷。刚过完金九银十，经过一场惨烈的江湖厮杀后，相信有很多小伙伴儿已经找到了自己心仪的工作，也有的正在找工作的途中。考虑到年后必定又是一场不可避免的厮杀，这里提前记录一下自己平时遇到和总结的一些知识点，自己巩固复习加强基础的同时也希望能在你的江湖路上对你有所帮助。笔者在入职最近这家公司之前也曾有过长达3个月的闭关修炼期，期间查阅资料无数，阅读过很多文章，但总结下来真正让你印象深刻的，不是那些前沿充满神秘感的新技术，也不是为了提升代码逼格的奇淫巧技，而是那些我们经常由于项目周期紧而容易忽略的基础知识。 所谓万丈高楼平地起，只有你的地基打得足够牢固，你才有搭建万丈高楼的底气，你才能在你的前端人生路上越走越远 。 这篇主要是先总结一下CSS相关的知识点，可能某些部分不会涉及到太多具体的细节，主要是对知识点做一下汇总，如果有兴趣或者有疑惑的话可以自行百度查阅下相关资料或者在下方评论区留言讨论，后续文章再继续总结JS和其他方面相关的知识点，如有不对的地方还请指出。 1. CSS盒模型 CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型

1. CSS盒模型 CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。 CSS盒模型可以看成是 由从内到外的四个部分构成，即内容区（content）、内边距(padding)、边框(border)和外边距(margin)。内容区是盒子模型的中心，呈现盒子的主要信息内容；内边距是内容区和边框之间的空间；边框是环绕内容区和内边距的边界；外边距位于盒子的最外围，是添加在边框外周围的空间。 根据计算宽高的区域我们可以将其分为 IE盒模型 和 W3C标准盒模型 ，可以通过 box-sizing 来进行设置： content-box ：W3C标准盒模型 border-box ：IE盒模型 区别： W3C标准盒模型 ：width(宽度) = content(内容宽度) IE盒模型 ：width(宽度) = content(内容宽度) + padding(内边距) + border(边框) 2. BFC BFC即Block Fromatting Context(块级格式化上下文)

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上 -webkit 前缀。 .box{ display: -webkit-flex; /* Safari */ 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 。 三、容器的属性