flex布局

CSS居中完全指南——构建CSS居中决策树

阅读更多关于 CSS居中完全指南——构建CSS居中决策树

CSS居中完全指南——构建CSS居中决策树本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到CSS居中问题时有章可循. 参考 Centering in CSS: A Complete Guide 和【基础】这15种CSS居中的方式，你都用过哪几种本文的引用归原作者所有. 代码在线演示工具 JSbin使用指南 1.Horizontally 水平居中 1.1 inline 或 inline-* 元素水平居中给需要居中的元素一个 block 父元素,需要居中子元素为文本或者 inline , inline-block , inline-table , inline-flex 核心代码 .center-children { text-align: center; } JSbin演示地址效果: 1.2 block 元素水平居中父元素为 block ,子元素也为 bolck ,且子元素设置了宽度 (没宽度子元素就继承父元素宽度,居中没有意义). 无论正在居中块级元素的宽度或父级的宽度如何，都会起作用。方法:子元素 margin: 0 auto; 左右外边距设置为自动填充核心代码 .center-me { margin: 0 auto; } 效果: block 元素水平居中JSbin演示地址 1.3多个 block 元素水平居中 1.3.1 多个

CSS伸缩布局

阅读更多关于 CSS伸缩布局

1. 伸缩布局应用: 伸缩布局应用主轴： Flex容器的主轴用来配置Flex项目，默认是水平方向侧轴：与主轴垂直的轴称为侧轴，默认还是垂直方向方向：默认是主轴从左向右，侧轴默认是从上到下主轴和侧轴并不是固定不变的通过flex-direction可以互换 min-width 设置px 到达设置的这个值就不在缩放了 max-width 跟上面这个相反 flex 可以放在每个盒子里面自由调整需要给盒子添加display: flex; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> section { width: 80%; height: 200px; border: 1px solid pink; margin: 100px auto; /*给父级盒子添加flex*/ display: flex; /*伸缩布局模式*/ } section div { height: 100%; flex: 1; /*每个子盒子占的份数*/ } section div:nth-child(1) { background-color: pink; } section div:nth-child(2) { background-color:

CSS3.0盒模型display: box;详解

阅读更多关于 CSS3.0盒模型display: box;详解

box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(- moz)、opera(-0)、chrome/safari（-webkit)。一、box-flex属性 box-flex主要让子容器针对父容器的宽度按一定规则进行划分 HTML代码： <article> <section class="sectionOne">01</section> <section class="sectionTwo">02</section> <section class="sectionThree">03</section> </article> CSS代码： .wrap{ width:600px; height:200px; display:-moz-box; display:-webkit-box; display:box; } .sectionOne{ background:orange; -moz-box-flex:3; -webkit-box-flex:3; box-flex:3; } .sectionTwo{ background:purple

阅读更多关于 flex布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* flex布局翻译成中文叫做弹性盒子，或者叫弹性布局。在使用flex布局中，需要熟记两个概念，flex container 和 flex item。前者为弹性容器，后者为容器中的子元素。 */ .container { height: 400px; background-color: #999; /*当一个容器的display属性指定为flex的时候，这个容器才能够称为弹性盒子。*/ /* 将一些块状元素放入到一个弹性盒子当中的时候，这些块状元素的特性就会消失掉了，即使不用display：inline-block，也能显示在一行当中 */ display: flex; /* 在弹性容器中的元素默认是横向排列的，若是要将元素进行纵向排列，则需要使用flex-direction这个属性,值为column。 (row为默认值，横向排列)*/ /

flex布局开发

阅读更多关于 flex布局开发

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

css-基础

阅读更多关于 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 布局教程：语法篇

阅读更多关于 Flex 布局教程：语法篇

网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex 布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出常见布局的 Flex 写法。网友 JailBreak 为本文的所有示例制作了 Demo ，也可以参考。以下内容主要参考了下面两篇文章： A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties 。一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上 -webkit 前缀。 .box{ display: -webkit

Flex 布局教程：语法篇

阅读更多关于 Flex 布局教程：语法篇

Flex 布局教程：实例篇

阅读更多关于 Flex 布局教程：实例篇

你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是 Landon Schropp 的文章和 Solved by Flexbox 。一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到 codepen 查看Demo。如果不加说明，本节的HTML模板一律如下。 <div class="box"> <span class="item"></span> </div> 上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。 1.1 单项目首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。 .box { display: flex; } 设置项目的对齐方式，就能实现居中对齐和右对齐。 .box { display: flex; justify-content: center; } .box { display: flex; justify-content: flex-end; } 设置交叉轴对齐方式，可以垂直移动主轴。 .box { display: flex; align-items: center;

中高级前端面试秘籍，助你直通大厂(一)

阅读更多关于中高级前端面试秘籍，助你直通大厂(一)

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

订阅 flex布局