前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局
高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局 一、文档流 1、什么是文档流 将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素 2、本质 文档流本质是 nomal flow （普通流、常规流） 3、BFC（Block ...
原文：flex是否脱离文档流？flex布局，低版本浮动布局，gird布局，定位布局，自适应布局，一分钟带你了解所有布局
什么是文档流 文档流：又称普通文档流和常规文档流，即浏览器定义的页面元素自上而下，从左往右排列的常规文档模式。 可通过一些浏览器支持的布局方式进行改写文档流布局，例如我们先来查看定位。 . 定位分为五种：static absolute relative fixed sticty 译为黏性的 首先来说下static，我们在创建一个元素或者在html结构里已经定义好了一个元素的时候，我们可以查看到他们 ...
2021-05-11 17:52 0 640 推荐指数：
相关推荐
文档流、浮动布局、流式布局、定位布局、flex布局、响应布局
一、文档流 1、什么是文档流 将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素 2、本质 文档流本质是 nomal flow （普通流、常规流） 3、BFC（Block Formatting Contxt） 块级格式化上下文，它是一个独立的渲染 ...
浮动，定位，flex布局
什么是文档流 英文原文是：Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes ...
3分钟看懂flex布局
首先要有个容器，并设置display:flex;display:-webkit-flex;该容器有以下六个属性： flex-direction (元素排列方向) row, row-reverse, column, column-reverse flex-wrap (换行 ...
flex布局与grid布局
详情： grid布局：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html flex布局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 问题 ...
前端布局之Flex布局
1.内容水平排列-左对齐 需要在父节点上添加：display:flex;表示使用Flex布局。 flex-direction:row; /* 表示内容直接横排列 */ 2.内容横排列-反转右对齐 flex-direction:row-reverse 3.垂直排列 ...
Grid布局和Flex布局
Flex布局（弹性布局） Flex是弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。 采用Flex布局的元素，称为Flex容器。flex item项目是Flex布局的元素，简称项目。 容器：水平的主轴（main axis）和垂直 ...
flex布局
1.控制轴方向的方法 display: flex;默认沿着X轴排列 如何方块堆满容器大于容器宽度。会自动压缩 flex-direction决定主轴方向（X轴） 属性值：4个 1：flex-direction: row 默认主轴从左到右，左起点 ...