flex布局

弹性（Flex）布局的使用

阅读更多关于弹性（Flex）布局的使用

最近我参与实施的两个项目中，一个页面交互复杂，而另一个相对传统，两个项目相比之下凸显出了页面布局样式的时间占比不可忽视，使用了弹性布局代码量精简了不少。虽说如此，弹性布局往往会有些潜在的问题，且改动后，要立即查看页面也需要不少时间，因此我把项目中使用弹性布局过程中遇到的问题稍作整理，为大家以后使用时，可以有效规避这些麻烦。使用场景前端开发中，网页布局是很重要的一部分。之前传统布局方案中，基本依赖display + position + float实现，虽然能实现垂直居中，等比排布等，但有时会不够准确并且使css语句过多。弹性布局最大的优点就是弹性，虽然使用百分比或者媒体查询也可以实现响应布局，但我认为以下几种情况下，flex布局是比较好的选择：视口中的特定块按照比例进行缩放一些以基准线对齐的布局模块垂直居中，水平居中左中右弹性布局常用属性 1、Flex布局概念 flex全称是flexbox（flexible Box），即弹性盒子。这一模块提供更加有效的的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的即弹性的。包围在外面的即容器，内部的即为项目，也就是说采用Flex布局的元素就是flex容器（display：flex或inline-flex）,它的所有子元素称为flex项目。容器默认存在两根轴线，一根主轴（main axis）

简易flex双列布局

阅读更多关于简易flex双列布局

.flex-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; background: #fff; } .flex-list .flex-list-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 48%; padding-bottom: 20px; } .flex-list .flex-list-item:nth-child(2n+1) { margin-right: 4%; } 来源： oschina 链接： https://my.oschina.net/u/2266306/blog/3164925

阅读更多关于 flex布局

一、基本认识　　 Flex是Flexible Box的缩写，“灵活的盒子”，就是弹性布局，用来为盒状模型提供最大的灵活性。　　传统的布局方式基于盒模型，主要通过 display 、 position 、 float 、 padding 、 margin 等属性进行布局排版，使用起来不是特别方便。　　flex布局简单粗暴且完美地解决了这一问题，且兼容市面上所有现代浏览器。　　注意： Internet Explorer 10：使用 -ms- 前缀； UC浏览器：使用 -webkit- 前缀。　二、基本概念　　主轴　　　　主轴由 flex-direction 定义,默认为inline方向。　交叉轴　　交叉轴与主轴垂直。　　三、属性　　创建flex容器：　　 display: flex; 　　display: inline-flex; 针对行内元素　　flex-direction: 　row 主轴按inline方向　　　　　　　　　 row-inverse 主轴按inline方向，起点和终点替换　　　　　　　　　 column 主轴按block方向　　　　　　　　　 column-inverse 主轴按block方向，起点和终点替换　　flex-wrap: 　wrap 容器内项目过多放不下时换行　　　　　　　 no-wrap 不换行　

响应式布局原理

阅读更多关于响应式布局原理

什么是响应式布局一种网站兼容多种终端对不同屏幕尺寸（大小）做出响应，并进行相应布局的一种移动Web开发方式以下有两种响应式布局，仔细读懂其中的代码，你也就掌握了响应式布局的原理了。（代码有很多重复的地方，只是看起来很长，内容并不多） grid.css .container { width : 100% ; padding-left : 15px ; padding-right : 15px ; margin-left : auto ; margin-right : auto ; } /*sm 小屏*/ @media ( min-width : 576px ) { .container { width : 540px ; } } /*md 中屏*/ @media ( min-width : 768px ) { .container { width : 720px ; } } /*lg 大屏*/ @media ( min-width : 992px ) { .container { width : 960px ; } } /*xl 超大屏*/ @media ( min-width : 1200px ) { .container { width : 1140px ; } } .row { margin-left : -15px ; margin-right : -15px ; }

css布局 - 常规上中下分左右布局的一百种实现方法（更新中...）

阅读更多关于 css布局 - 常规上中下分左右布局的一百种实现方法（更新中...）

一、上中下左固定 - fixed+margin 概括：如图，此种布局就是顶部、底部和左侧固定不动，只有中间右侧超出可滚动。 html： <header>我是头部position: fixed;z-index: 9;</header> <section class="flexModal fixedLeft"> <nav> <ul> <li>section.flexModal nav ul>li*5</li> <li>栏目一</li> <li>栏目二</li> <li class="active">栏目三</li> <li>栏目四</li> <li>栏目五</li> </ul> </nav> <article> <h3> 内容区域 section.flexModal articel </h3> <p> section{ padding: 60px 0; } </p> <p> section.flexModal{ display: flex; } </p> <p> section.flexModal nav{ width: 200px; } </p> <p> section.flexModal article{ flex: 1; } </p> </article> </section> <footer>底部版权同头部 position: fixed;z-index: 9;<

全屏布局

阅读更多关于全屏布局

方法一 html,body,.parent{margin:0;height:100%;overflow:hidden;} body{color:white;} .top{ position:absolute;top:0;left:0;right:0;height:100px; background:blue; } .left{ position:absolute;left:0;top:100px;bottom:50px;width:200px; background:red; } .right{ position:absolute;left:200px; top:100px;bottom:50px;right:0; background:pink;overflow: auto; } .right .inner{min-height: 1000px;} .bottom{ position:absolute;left:0;right:0;bottom:0;height:50px; background: black; } <body> <div class="parent"> <div class="top">top</div> <div class="left">left</div> <div class="right"> <div class="inner">right</div>

CSS 自适应布局

阅读更多关于 CSS 自适应布局

本篇文章将介页面布局中的自适应布局，常见的自适应布局有以下2种：左列固定右列自适应、左右两列固定中间自适应。 1. 左列固定右列自适应布局方案说明：左列固定右列自适应，也可以为右列固定左列自适应，常见于中台管理界面、移动端Web的列表展示等等。 <div class="container"> <div class="left">固定宽度</div> <div class="right">自适应</div> </div> 1.1 子元素 float:left 说明：左边的固定列设置为 float:left，右边的自适应列设置为 float:none。 CSS ： * { margin: 0;padding: 0 } .container { position: absolute; width: 100%; height: 100%; } .left { float: left; width: 200px; height: 100%; background-color: #72e4a0; } .right { float: none; width: 100%; height: 100%; background-color: #9dc3e6; } 1.2 子元素 width:calc() 说明：自适应列的width根据calc()自动计算，如：父容器width -

Flutter学习笔记：布局

阅读更多关于 Flutter学习笔记：布局

3. 布局部分 1. Row水平布局所谓的水平布局就是单一横向的行内布局, 类似div标签 ,每次调用一个Row，他会自动占用一行，其高度由内部元素的高度决定，Row组件是一个支持弹性盒布局的组件代码案例 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Layout Widget Demo', home: Scaffold( appBar: new AppBar( title: new Text('Row Layout demo'), ), body: Row( children: <Widget>[ Container( child: Center( child: Text( '左边的文字', style: TextStyle(color: Colors.white, fontSize: 15), ), ), width: 300, height: 200, decoration: BoxDecoration( gradient: LinearGradient(colors: [ Colors.lightBlue, Colors.lightGreen, Colors.orangeAccent,

flex布局container:align-items属性

阅读更多关于 flex布局container:align-items属性

align-itens align-items是决定items在交叉轴上的对齐方式 <style> .test { height : 400px ; width : 400px ; background-color : #f00 ; /* 开启flex布局 */ display : inline-flex ; /* align-items: flex-start;默认值flex-start;以交叉轴上的start(开始位置)对齐 */ /* align-items: flex-end;以交叉轴上的end(结束位置)对齐 */ /* align-items: baseline;以items的内容的基线对齐 */ align-items : center ; /*居中对齐*/ } .box { height : 100px ; width : 100px ; } .box1 { background-color : #ff0 ; } .box2 { background-color : #0f0 ; } .box3 { background-color : #00f ; } </style> </head> <body> <div class= "test" > <div class= "box1 box" >idems1</div> <div class= "box2 box"

理解display中的box-flex属性

阅读更多关于理解display中的box-flex属性

今天有个同学在面试的时候碰到了使用css2和css3实现一种页面布局，要求页面效果如下：在实现这种页面布局时，他使用了display：box-flex，下面是相应的代码： css2 方式 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> html{height: 100%;} body{margin: 0;padding: 0;height: 100%;padding-left: 200px;padding-top: 40px;} .header{height: 40px;width:100%;background: #f40;position: absolute;top:0;left:0;} .left{width: 200px;position: absolute;top:40px;left: 0;background: green;height: 100%;} .right{height: 100%;background: red; } </style> </head> <body> <div class="header"></div> <div class="left"></div> <div class="right"></div> </body>

订阅 flex布局