一、flex布局体验 二、flex布局原理 display:flex; 三、flex布局父项常见属性 3.1 常见父项属性 3.2 flex-direction设置主轴的方向 3.3 justify-content 设置主轴上的子元素排列方式 justify-content 属性定义了项目在主轴上的 ...
分类：
其他好文 时间：
2020-06-01 23:37:24
阅读次数：
62
简介 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 兼容性 IE10+、Chrom21+、Firefox22+、Safari6.1+ 基本概念 //任何一个容器都可以指定为 Flex 布局。 // 注意：Webkit 内核的浏览器，必须加上-we ...
分类：
其他好文 时间：
2020-06-01 21:05:39
阅读次数：
82
1、基本概念1）Flex布局元素称为Flex 容器，子元素称为Flex项目；2）容器存在两根轴：主轴main axis(默认是水平方向)和交叉轴cross axis(默认是垂直方向)；3）任何一个容器都可以指定为flex布局： 块元素：display：flex； 行内元素：display:inlin ...
分类：
其他好文 时间：
2020-06-01 21:03:38
阅读次数：
90
定义： 适配器模式(Adapter Pattern)：将一个接口转换成客户希望的另一个接口，使接口不兼容的那些类可以一起工作，其别名为包装器(Wrapper)。适配器模式既可以作为类结构型模式，也可以作为对象结构型模式。 在适配器模式中，我们通过增加一个新的适配器类来解决接口不兼容的问题，使得原本没 ...
分类：
其他好文 时间：
2020-06-01 20:49:11
阅读次数：
76
1.什么是Flex布局 Flex 是flexible Box 的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局。链接参考 2.基本概念 采用Flex布局的元素，称为容器(flex container),简称‘容器’。它的所有子元素自动成为容器成员，称为 ...
分类：
其他好文 时间：
2020-06-01 20:43:28
阅读次数：
54
弹性盒子基础 弹性盒子(Flexible Box)是css3中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。 定义一个弹性盒子 在父盒子上定义display属性： #box{ display: -webkit-flex; //webkit内核浏览器的兼容设置，下同 display: fle ...
分类：
Web程序 时间：
2020-06-01 00:26:13
阅读次数：
92
起因 工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的问题，以及一些有意思的特性，在此写篇博客记录一下。 flex三个值的含义 众所周知，flex布局所有的属性有两种：一种作用在弹性容器（Flex container）上，一种作用在弹性项目（Flex item）上，而flex就是作用在弹性 ...
分类：
其他好文 时间：
2020-05-31 11:07:17
阅读次数：
63
在flex出现之前我们做页面都是使用的左右浮动，inline-block，表格等布局方式来实现页面的各种布局，在这些写法中由于浏览器的兼容问题还需要写很多的hack来解决兼容问题。','2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已... ...
分类：
Web程序 时间：
2020-05-31 10:49:47
阅读次数：
83
现在有flex布局等新技术，bfc的效果比如包住元素，进行自适应布局等已经不需要了。现在只有免式的事后才需要知道BFC！ 看不懂的定义 CSS规范中对 BFC 的描述 9.4.1 块格式化上下文 浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table ...
分类：
Web程序 时间：
2020-05-31 10:46:40
阅读次数：
79
前言：这是我看过最好的flex布局教程：30分钟彻底弄懂flex布局 传统的布局方法与flex属性通览 文档流：块级元素独占一行，从上往下排列，行级元素从左往右排列。 display inline-block主要用来做横向的布局。用分离负maigin用来产生位移。 元素的布局 学习flex我分成两个 ...
分类：
Web程序 时间：
2020-05-31 10:41:32
阅读次数：
75
