flex布局

CSS弹性盒子

阅读更多关于 CSS弹性盒子

> 弹性盒模型的一些知识 ## 一、简单介绍弹性盒模型（ Flexible Box或FlexBox）是一个CSS3新增布局模块，官方称为CSS Flexible Box Layout Module，用于实现容器里项目的对齐、方向、排序（即使在项目大小位置、动态生成的情况）, 分配空白空间。弹性盒模型最大的特性在于，能够动态修改子元素的宽度和高度，以满足在不同尺寸屏幕下的恰当布局。 ## 二、基本知识弹性盒子是由弹性容器（flex container）和弹性子元素（flex item）组成，弹性盒子有一个主轴（main axis）和一个纵轴（cross axis），弹性子元素沿着主轴依次排列，侧轴垂直于主轴。弹性容器的主轴开始（main start）、主轴结束（main end）和侧轴开始（cross start）、侧轴结束（cross end）代表了弹性子元素排列的起始和结束位置。具体可以看下面的图。 ![弹性盒子组成示意图](https://img2018.cnblogs.com/blog/1264379/201911/1264379-20191118120318988-511922975.png) ## 三、属性分类 ### 1. 弹性容器的相关属性 | 属性 | 属性说明 | | :-------------: | :---------------------

【前端知识体系】CSS布局知识强化

阅读更多关于【前端知识体系】CSS布局知识强化

1.实现两栏/三栏布局的方法? 表格布局 float + margin布局 inline-block布局 flexbox布局（兼容性的问题） 1.1 基础布局 <style> * { margin: 0; padding: 0; } .layout { margin-top: 10px; } .layout div{ min-height: 100px; } </style> <body>  <section class="layout float"> <style> .layout.float .left { float: left; width: 300px; background-color: #48adff; } .layout.float .main { background-color: #ff4344; } </style> <article class="left-main"> <div class="left"></div> <div class="main"> <h1>浮动两栏布局</h1> <p>两栏布局的中间部分</p> <p>两栏布局的中间部分</p> </div> </article> </section>  <section class="layout absolute">

自适应页面的实现方式

阅读更多关于自适应页面的实现方式

页面自适应自适应是指页面内容自动适应屏幕大小，实现自适应的方法有多种： 1.简易场景实现自适应：浮动、页面居中、元素宽度不写固定而设置百分比自动匹配大小。这样在页面宽度发生变化时，能利用以上特性实现简易的自适应效果。 2.如果实际开发中有复杂场景的需求，一般通过编写多套CSS代码，然后用媒体查询技术，让页面根据不同屏幕尺寸来加载不同代码模块以实现适配不同屏幕的目的。这种方式需要编写多套代码，虽然工作量大，但对于不同屏幕尺寸的设备都有单独一套CSS代码，维护起来更方便。 3.响应式布局，响应式布局是指根据不同屏幕尺寸自动调整页面显示效果实现自适应(也要用到媒体查询技术 )。响应式布局一般有栅格系统布局，flex布局。 bootstrap框架的核心就是栅格系统。（后面详细介绍栅格系统的实现方式）。 CSS3 媒体查询 media queries 媒体查询可针对不同设备场景使用不同css，一般栅格系统和多套代码逻辑匹配页面是都要用媒体查询来确定页面大小。媒体查询技术的原理：通过匹配不同屏幕设备的特征,让不同特征下的CSS代码生效。常用匹配特征 media features width/height: 浏览器宽高 max-width：表示小于最大宽度时生效 min-width：表示大于最小宽度时生效 device-width/device-height:

弹性布局的基础讲解

阅读更多关于弹性布局的基础讲解

弹性布局的基础讲解弹性布局是由w3c在2009年提出的一种布局方法，目前浏览器都已经支持弹性布局（忽略IE6吧）。本文主要讲解弹性布局的基本语法并将其应用到实际网页布局中如何应用弹性布局，代码如下： <!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> *{ margin: 0; padding: 0; } div{ border: 1px solid #ccc; box-sizing: border-box; } .box{ height:20vh; display: flex; } .box div{ flex: 1; } .box div:last-child{ flex: 2; } </style> </head> <body> <div class="box"> <div>Document1</div> <div>Document2</div> <div>Document3</div>

flex招式心法

阅读更多关于 flex招式心法

　　 flex布局绝对是我们平常在布局中用的最多的一个属性，我们来看看它在can i use中的浏览器支持度：（截止到2019/11/16）　　挖藕，凹森！支持度居然这么好，好到连ie也能支持大部分的flex布局的属性，那接下来我们就看看它的三大招式吧。　　基本概念　　任何一个元素，无论块级元素还是行内元素，都可以设置为flex容器，接下来都简称为“容器”，块级元素设置display: flex，行内元素设置display: inline-block。　　元素一旦设置成为flex容器，其向下的第一级子元素将自动变成flex项目，接下来简称“项目”，并强制附上inline-block属性，同时项目的float、vertical-align、clear属性将全部失效。　　容器默认有两根轴，一根主轴，一根副轴。主轴的默认方向为水平方向。　　容器属性　　 1， flex-direction 。定义主轴的方向，默认为row，即横向排列。可设置为column，表示纵向排列；　　2， justify-content 。定义项目在主轴上的排列方式，默认值为flex-start，可取值 flex-start | flex-end | center | space-between | space-around 。还有一个space-evenly，但这个属性不建议使用

Flex实现九宫格

阅读更多关于 Flex实现九宫格

写一个靠谱的flex布局 <!DOCTYPE html> <html> <style> .block { padding-top: 30%; margin-top: 3%; border-radius: 10%; background-color: orange; width: 30%; } .container-flex2 { display: flex; flex-wrap: wrap; justify-content: space-around; } </style> <body> <div class="container-flex2"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> </body> </html> 关键点：利用了padding-top和flex-wrap:wrap，当设置background-color时

阅读更多关于 flex布局

flex布局 flex布局传统布局的优点：兼容性好，布局繁琐，局限性，不能在移动端很好的布局 flex弹性布局优点： 1.操作方便，布局极为简单，移动端应用很广泛 2.PC端浏览器支持情况较差 3.IE11或更低版本，不支持或仅部分支持建议：如果是PC端页面布局，我们还是传统布局。如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局布局原理 flex是flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局当我们为父盒子设为flex布局以后，子元素的float,clear和vertical-align属性将失效伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局采用了Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动称为容器成员，称为Flex项目（flex item），简称“项目”。总结flex布局原理：就是通过父盒子添加flex属性，来控制子盒子的位置和排列方式 flex布局父项常见属性 display:flex|inline-flex flex-direction:row|row-reverse|column|column-reverse;主轴方向 flex-wrap:wrap|nowrap|wrap

多个div排列在同一行而不换行

阅读更多关于多个div排列在同一行而不换行

有时候，我们可能会产生多个div标签横向排列而不换行的需求，具体有以下几种实现方法： 1. 同级div设置display:inline-block，父级div强制不换行例如： <html> <head></head> <body> <div id="container"> <div class="lable">测试测试</div> <div class="lable">测试测试</div> <div class="lable">测试测试</div> <div class="lable">测试测试</div> <div class="lable">测试测试</div> <div> </body> <style> #container { width:400px; height: 200px; background-color: red; overflow: auto; white-space: nowrap; } .lable { width: 100px; background-color: blue; display: inline-block; } </style> </html> 2. 通过position绝对定位实现例如: <html> <head></head> <body> <div id="container"> <div id="lable1">测试测试<

前端进阶系列(五):flex布局

阅读更多关于前端进阶系列(五):flex布局

以下内容主要摘抄自阮一峰老师的博客 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 背景 Flexbox布局（Flexible Box）模块（目前是W3C Last Call Working Draft）旨在提供更有效的布局方式，即使容器中的项目之间对齐和分配空间的大小未知或动态（因此单词“flex”）。 flex布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序），以最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。Flex容器扩展项目以填充可用空间，或缩小它们以防止溢出。最重要的是，flexbox布局与方向无关，而不是常规布局（基于垂直的块和基于水平的内联块）。虽然那些适用于页面，但它们缺乏灵活性来支持大型或复杂的应用程序（特别是在方向更改，调整大小，拉伸，缩小等方面）。注意： Flexbox布局最适合应用程序的组件和小规模布局，而Grid布局则适用于更大规模的布局。基本概念容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与侧边的交叉点）叫做 main-start ，结束位置叫 main end ；交叉轴的开始位置叫 cross start ，结束位置叫 cross end 。项目默认沿主轴排列

css display:flex 属性

阅读更多关于 css display:flex 属性

一：display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。二：flex的六个属性 flex-direction 容器内元素的排列方向(默认横向排列) 1：flex-direction:row; 沿水平主轴让元素从左向右排列 2：flex-direction:column; 让元素沿垂直主轴从上到下垂直排列 3：flex-direction:row-reverse;沿水平主轴让元素从右向左排列 flex-wrap 容器内元素的换行(默认不换行) 1：flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%； 2：flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了； justify-content 元素在主轴（页面）上的排列 1：justify-content : center;元素在主轴（页面

订阅 flex布局