flex布局常见用法小结
1,display:flex
这个在父容器中声明;
2,flex-direction:row / column
默认为横向,也在父容器中设置,定义flex布局的主轴方向;一条轴为主轴,那么另一条轴自然而然就是副轴;
3,flex:1
在子元素中设置,表示所有的子元素不管内容如何,其宽度和高度都完全一样,且加起来刚好充满父容器;
4,align-items:center | flex-start | flex-end | space-between | space-around
这个表示元素在副轴方向上的排列;
5,justify-content:center | flex-start | flex-end | space-between | space-around
表示元素在主轴方向上的排列,在父容器中设置,center代表所有元素挤到最中间显示,如下:
而space-between则意味着空格将主要处于横向页面的中间,换言之,左右两边界没有空隙,效果如下:
space-around则代表所有的子元素左右间隙相等,左右边界均有空隙,效果如下:
6.flex-wrap:no-wrap(默认) | wrap
这是关于是否换行的问题,如已经设置子元素的大小,但子元素的数量加起来长度超过屏幕一行,那么因为默认是不换行的,子元素原来被设置的宽度将被压缩,所有子元素硬挤在一行显示,如下。
更改属性flex-wrap:wrap,让其换行显示,子元素的宽高又恢复正常,看下图
flex布局常见用法小结的更多相关文章
- Flex 布局相关用法
前言: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 就不容易实现. 2009年,W3C提出了 ...
- C++ 指针常见用法小结
1. 概论 2.指针基础 3. 指针进阶 4. 一维数组的定义与初始化 5. 指针和数组 6. 指针运算 7. 多维数组和指针 8. 指针形参 9. 数组形参 10. 返回指针和数组 11. 结语 ...
- flex布局相关用法
/* pages/classic/classic.wxss */ .chunk { /* 行内元素可设置但是设置了flex,无效了 *//* display: inline-block; */ wid ...
- flex布局开发
flex布局开发 布局原理 flex时flexible Box的缩写,意为"弹性布局",用来为盒子模型提供最大的灵活性,任何一个容器都可以定位flex布局 [注意] 当我们为父盒子 ...
- flex布局使用方法简要汇总
近期因为使用inline-block,在项目部署后出现了一点小问题,几番解决未果,遂使用flex布局,于是借此机会对flex布局的用法做一个简要的汇总. 遇到的bug如下: 本想两个div使用inli ...
- 用Flex实现常见的几种布局
用Flex实现常见的几种布局 1.水平,垂直居中. <style type="text/css"> .container{ display: flex; width: ...
- 理解CSS3里的Flex布局用法
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ disp ...
- 三大Flex布局用法(转载)
Flex布局基础 对于Flex 初学者,在Hello World之后,Flex布局便是下一站学习要的要义.若是从传统的Html转变而来,总希望找到类似于Div/Table/UL等之类的控件,也希望在 ...
- React Native 中的 Flex Box 的用法(水平布局、垂直布局、水平居中、垂直居中、居中布局)
版权声明:本文仅供个人学习. CSS 中 Flex-Box 语法链接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 是 ...
随机推荐
- 移动端各种滚动场景需求的插件better-scroll
移动端各种滚动场景需求的插件: 文档地址: better-scroll:https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better- ...
- flink引出的kafka不同版本的兼容性
参考: 官网协议介绍:http://kafka.apache.org/protocol.html#The_Messages_Fetch kafka协议兼容性 http://www.cnblogs.c ...
- 从React组件划分的纠结到总结
在实际开发项目中,我将所有的React组件划分为容器组件和展示组件,展示组件其实就是一个纯函数组件,没有任何副作用,基本都是PureComponent.但是突然,出现了这么一个问题: 我有一个浮层组件 ...
- Day03(黑客成长日记)------>元祖及列表的增减改查
#昨日作业解析: # s = 'sadagwa'# i = 0# while i < len(s):# s1 = s[i]# print(s1)# i += 1# while使用技巧,先找递增变 ...
- java开发师笔试面试每日8题(1)
1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致. 2.使用fin ...
- Codeforces Round #485 (Div. 2) F. AND Graph
Codeforces Round #485 (Div. 2) F. AND Graph 题目连接: http://codeforces.com/contest/987/problem/F Descri ...
- 底图与蒙版的过渡效果transition
我用2种方法写了底图与蒙版的过渡效果 方法一:用js方法 <!DOCTYPE html> <html> <head> <meta http-equiv=&qu ...
- 20145232韩文浩 《网络对抗技术》 Web安全基础实践
问题回答 SQL注入攻击原理?如何防御? 原理:SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序,而这些输入大都是SQL语法里的一些组合,通过执行SQL语句进而执行攻击者所要的操作,使 ...
- Django积木块11 —— 缓存
缓存 Django的缓存可以缓存视图中的函数,模版中的内容,和一些不长变化的数据. # setting CACHES = { 'default':{ 'BACKEND':'django.core.ca ...
- 基于react可无限向内部添加节点的tree
这两天学习react,撸了一遍文档后开始自己动手写点东西. 正好从朋友那得到灵感,写一个小例子. 这个东西是这样的,就是点击的这个节点就往它里面添加一个child. 于是乎!我想到的就是用自调函数,递 ...