flex布局

flex布局笔记整理

阅读更多关于 flex布局笔记整理

flex布局笔记整理了解-webkit-box 利用postcss进行css代码的向后兼容时，display:flex兼容后的代码常会带有display：-webkit-box。部分移动端内核较低，只支持老版本的box布局，不支持flex布局。 box布局是flex布局的前身，与float不同，float超出边界时会自动换行，box和flex不会。 box与flex区别容器部分子元素总宽度超过父元素时： box => 子元素溢出父元素边界 flex => 子元素被挤压查看对比修改排列时的主轴： box => -webkit-box-orient: (horizontal | vertical) flex => flex-direction: (row | column) (效果相同，差异仅是属性名不同) 排列时的顺序: box => -webkit-box-direction: (normal | reverse) flex => flex-direction: (row-reverse | column-reverse) 注： flex的反转效果，以row-reverse为例，是从容器最右边开始排列的，box反转效果是从容器最左边排列的( 查看对比 ) 主轴富余空间管理： box => -webkit-box-pack: /* start: 富余空间在右边 / end

阅读更多关于 Flex布局

.container { display: flex | inline-flex; //可以有两种取值 } 1. flex-direction: 决定主轴的方向(即项目的排列方向) .container { flex-direction: row | row-reverse | column | column-reverse; } 　　默认值：row，主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端 column：主轴为垂直方向，起点在上沿 column-reverse：主轴为垂直方向，起点在下沿 2. flex-wrap: 决定容器内项目是否可换行 .container { flex-wrap: nowrap | wrap | wrap-reverse; } 　　默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。 wrap：项目主轴总尺寸超出容器时换行，第一行在上方 wrap-reverse：换行，第一行在下方 3. justify-content：定义了项目在主轴的对齐方式。 .container { justify-content: flex-start | flex-end | center | space-between | space-around; } 　　其他相关学习链接：

移动端flex布局以及和float布局的对比

阅读更多关于移动端flex布局以及和float布局的对比

还是这张设计稿效果图如下 html flex布局也称为弹性布局，非常容易上手。在flex布局中我搜索栏最外层div加上了padding，但是没有出现横向滚动条，是因为在flex布局中，他将容器自动撑满整个div，div宽度会等于容器的总宽度，即16+359=375px。同时，flex的垂直居中非常容易实现，在父元素中加一个 align-item：center即可。再者使flex布局中，两列、三列的布局可以用justify-content非常容易地实现，左对齐右对齐平均分布等等。详细使用方法网上好的博客非常多，我这里不再赘述。但是他的浏览器兼容性比较差，建议同时也学习float布局 flex布局的缺点 <div class="top-outer"> <input placeholder="请输入学号查询状态"> <button>搜索</button> </div> <form> <div class="title"> 学生信息 </div> <div class="input-outer"> <div style="display: flex"> <input placeholder="请输入学号" class="input-inline" name="userNumber"> <input placeholder="请输入姓名" class="input-inline"

React-Native flex 布局使用总结

阅读更多关于 React-Native flex 布局使用总结

React-Native flex 布局使用总结父视图属性(容器属性)： flexDirection : 对子布局方向的设置 row : 从左到右依次排列 row-reverse :从右向左依次排列 column:(default) 从上到下排列 column-reverse :从下到上排列 flexWrap: 定义子布局是否在父布局中多行排列 wrap: 允许多行排列 nowrap:(defaut) 不允许多行排列 justifyContent : 定义子元素之间的排列方式 flex-start:(default) 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。 flex-end: 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。 center: 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。 space-between: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 space-around: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 alignItems: 属性以与justify

div 盒子水平垂直居中方法

阅读更多关于 div 盒子水平垂直居中方法

第一种：第二种弹性布局父标签中使用display:flex 如果使用弹性布局，则子元素不需要设置float即浮动但是就会有浮动的效果 justify-content:space-around justify-content:space-between justify-content:center 水平居中 align-items:center 垂直居中 flex-direction:row 默认的纵向排列多行时即元素所占的大于一行时，想不要中间的间隙 align-content:center 子元素设置： flex-grow:1 作用：定义子元素放大比例 align-self: 其实就是用来覆盖父级align-ltems 垂直排列来源： https://blog.csdn.net/jjw_zyfx/article/details/100751749

弹性布局

阅读更多关于弹性布局

1 弹性布局简介弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。 >>> 了解两个基本概念，接下来会频繁提到： ① 容器：需要添加弹性布局的父元素； ② 项目：弹性布局容器中的每一个子元素，称为项目； >>> 了解两个基本方向，这个牵扯到弹性布局的使用： ① 主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴； ② 交叉轴：与主轴垂直的另一方向，称为交叉轴。 2 弹性布局的使用 ① 给父容器添加display: flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式； ② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流； ③ display:flex; 容器添加弹性布局后，显示为块级元素； display:inline-flex; 容器添加弹性布局后，显示为行级元素； ④ 设为 Flex布局后，子元素的float、clear属性将失效。但是position属性，依然生效。五个简单的div，只给父容器添加了display: flex;属性，就可以让容器内部打破原有文档流模式，展现为弹性布局。简单的了解一下弹性布局后，我们来详解一下配合“display: flex

前端基础精简总结

阅读更多关于前端基础精简总结

更好阅读移步这里 1. JavaScript 1.1. 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等 1.1.1. 变量声明 ES5： var //普通变量 function //函数 ES6新增: let //普通变量 const //常量 -- 声明的同时初始化，不可重新赋值，不能重复声明 import //模块 class //类 1.1.2. 数据类型 -- 类型介绍 ES5: String、Number、Boolean、Null、Undefined、Object ES6增: Symbol 其中，object为引用，其他为基本类型基本类型占据空间固定，是简单的数据段，将其存储在栈 (stack)中(按值访问) 便于提升变量查询速度为了便于操作这类数据，ECMAScript提供了 3 个基本包装类型：Boolean、Number 和 String 基本包装类型一种特殊的引用类型，每当读取一个基本类型值的时候，JS内部就会创建一个对应的包装对象，从而可以调用一些方法来操作这些数据引用类型由于其值的大小会改变，所以不能将其存放在栈中，否则会降低变量查询速度将其存储在堆 (heap)中，存储在变量处的值是一个指针，指向存储对象的内存处(按址访问) 可以为其添加、改变和删除属性和方法；但基本类型不可以添加属性和方法 -- 类型判断原始类型

flex实现流式布局

阅读更多关于 flex实现流式布局

摘自阮老师的博客点击查看运行效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style> * { margin: 0; padding: 0; } .parent { width: 200px; height: 150px; background-color: black; display: flex; flex-flow: row wrap; align-content: flex-start; } .child { box-sizing: border-box; background-color: white; flex: 0 0 25%; height: 50px; border: 1px dotted grey; list-style: none; } </style> </head> <body> <ul class="parent"> <li class="child"></li> <li class="child"></li> <li class="child"></li> <li class="child"></li> <li class="child"

强大的display:grid

阅读更多关于强大的display:grid

自从用习惯flex布局我基本已经不怎么使用float了。现在又出现了grid布局，就像flex的升级版，布局上十分强大。主要属性： grid-template-columns：//竖向排列 grid-template-rows：//横向排列首先比较一下flex和grid实现自适应九宫格，高度800px，宽度适应： flex 超过一层后样式就复杂了，特别是边框的处理有点复杂。(方法很多，不一一去展示了)。 <html> <head> <style type="text/css"> .box { padding: 10px; padding-bottom: 0; padding-right: 0; display: flex; flex-direction: column; height: 800px; width: calc(100vw - 20px); background-color: #000; } .content { display: flex; margin-bottom: 10px; flex: 1 } .b { flex: 1; margin-right: 10px; background-color: yellow; } </style> </head> <body> <div class="box"> <div class="content"> <div

趋势：flex和grid使布局更简单

阅读更多关于趋势：flex和grid使布局更简单

前言：记不久前面试的时候，面试官问我平时用什么布局方式，我非常耿直的说 div+css，利用position，float等布局，这就是非常传统的布局方式，通常都要写比较多的css代码；前几天在知乎上看到篇文章前端未来页面布局发展方向是 Flexbox 还是 Grid？ flex布局的话，我知道，是css3中引入的，即弹性盒子布局，它的浏览器兼容性如下图。对于grid布局，我才听闻，所以赶紧学习了一下。查看属性的兼容性可以在这个网站： can I use 一，flexbox: 任何一个容器都可以指定为Flex布局，设置 display:flex;设置这个属性之后，子元素的float,clear和vertical-align属性将会失效。 flex容器默认有两根轴：水平的主轴（main axis）垂直的交叉轴（cross axis）用表格的方式来一目了然的显示它的属性值：属性名称属性含义属性可能的值定义在容器的属性 flex-direction 决定主轴的方向 row( 默认 ) 水平，起点在左端 row-reverse 水平，起点在右端 column: 垂直，起点在上沿 column-reverse: 垂直，起点在下沿 flex-wrap 决定一条轴线放不下，如何换行 Nowrap( 默认 ) 不换行 Wrap: 换行，第一行在上面 Wrap-reverse: 换行

订阅 flex布局