文档章节

Flex使用总结

o
 osc_mervd488
发布于 2018/04/24 16:26
字数 571
阅读 10
收藏 0

精选30+云产品,助力企业轻松上云!>>>

最近做的项目因为对浏览器的兼容要求是IE10以上,所以大胆的使用了Flex布局,这里总结一些使用心得仅供参考。

一,Flex简单介绍

Flex是Flexible Box的缩写,意为”弹性布局”。任何一个容器都可以指定为Flex布局。当元素设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素,称为Flex容器(flex container)。它的所有子元素自动成为容器成员,称为Flex项目(flex item)。

二,用法及效果

  Flex容器的属性有:

  •  flex-direction   设置项目的排列方向
  •  flex-wrap        一行排不下的时候如何换行
  •  flex-flow              flex-direction属性和flex-wrap属性的简写形式
  •  justify-content    子元素的横向对齐方式
  • align-items     子元素垂直对齐方式
  • align-content      子元素多根轴线的对齐方式

Flex项目的属性有:

  • order          定义项目的排列顺序。数值越小,排列越靠前,默认为0
  • flex-grow    定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
  • flex-shrink  定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
  • flex-basis   定义了在分配多余空间之前,项目占据的主轴空间,默认为auto
  • flex            是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,主要使用了这个属性。
  • align-self   允许单个项目有与其他项目不一样的对齐方式

三,实例
1,全页面布局,要求:

html

1 <div class="header"></div>
2 <div class="content">
3        <div class="leftside"></div>
4        <div class="rightside"></div>
5 </div>

css:

1 .content{display:flex;}
2 .leftside{max-width:20%;}
3 .rightside{flex:1;}

 

2,复杂结构的行列表,要求:

一行的html:

1 <div class="line">
2     <div class="title"> 内部结构...  </div>
3     <div class="info"> 内部结构...  </div>
4     <div class="btns"> 内部结构... </div>
5 </div>

css:

.line{display:flex;align-items: center;justify-content: space-between;} //两端对齐,垂直居中
.title{flex:3;} //在总宽度中分配的比例
.info,.btns{flex:1;}

四,总结

用顺手了之后在各种结构中都想flex一下,但是注意,如果你的元素后续需要js操作显示隐藏,切换display:block,display:none功能的时候就不能使用flex了。

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Java线程池

前言 Java中对线程池的抽象是ThreadPoolExecutor类,Executors是一个工具类,内置了多种创建线程池的方法: newFixedThreadPool:固定长度线程池 newCachedThreadPool :可缓存线程池 newSin...

nullpointerxyz
15分钟前
29
0
Python笔记:用Python制作二维码

这些年,二维码在我国的日常使用频率特别大。因为其具有简单及安全性吧!除了用网络工具制作二维码,其实用JavaScript或Python也可以制作二维码,而且更有个性。 示例一(制作普通黑白二维码...

tengyulong
27分钟前
0
0
Redis-初体验/数据结构

定义: Redis 是 C 语言开发的一个开源的(遵从 BSD 协议)高性能键值对(key-value)的内存数据库,可以用作数据库、缓存、消息中间件等。它是一种 NoSQL(not-only sql,泛指非关系型数据库...

心田已荒
30分钟前
15
0
如何在保留订单的同时从列表中删除重复项? - How do you remove duplicates from a list whilst preserving order?

问题: Is there a built-in that removes duplicates from list in Python, whilst preserving order? 是否有内置的程序在保留顺序的同时从Python列表中删除重复项? I know that I can us...

fyin1314
今天
29
0
以太坊智能合约开发常见的10个安全问题

本文介绍CheckMarx安全研究小组通过扫描公开的以太坊智能合约所发现的Solidity智能合约开发中常见的十大安全问题,其中__未检查的外部调用__ 和 高成本循环 分列排行榜前两名。该安全问题排行...

区块链教程
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部