1、flex布局

1.1  容器指定为flex布局

.box{display: flex;}

1.2 行元素指定flex布局

.box{display:inline-flex}

2、容器的属性

2.1、flex-direction　2.2、flex-wrap　　2.3、flex-flow　　2.4、justify-content　　2.5、align-items　　2.6、align-content

2.1 flex-direction属性 ——决定项目的排列方向

flex-direction: row; /*（默认值）水平方向,起点在左端*/
flex-direction: row-reverse;/*水平方向,起点在右端*/
flex-direction:column ;/*垂直方向,起点在上沿*/
flex-direction: column-reverse;/*垂直方向,起点在下沿*/

                                 

Flex 常用布局的更多相关文章

  1. flex常用布局

    公共样式: <style> * { margin: 0; padding: 0; } .has-flex { display: flex; } </style> 垂直居中 子元 ...

  2. CSS3动画属性和flex弹性布局各个属性

    [CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...

  3. ExtJs常用布局--layout详解（含实例）

    序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...

  4. Flutter常用布局组件

    Flutter控件本身通常由许多小型.单用途的控件组成,结合起来产生强大的效果,例如,Container是一种常用的控件,由负责布局.绘画.定位和大小调整的几个控件组成,具体来说,Container是 ...

  5. 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_流式布局

    移动web开发流式布局 1.0 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器, ...

  6. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  7. python：页面布局 后台管理页面之常用布局

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. 常用布局，div竖直居中

    常用两列布局,多列布局和div竖直居中 body { margin:; padding:; } .w200 { width: 200px; } .mar-left200 { margin-left: ...

  9. 跟我学android-android常用布局介绍

    在上一章我们曾经谈到,Android平台的界面 是使用XML的方式设计的,然后在上一章我们只做了一个简单的界面,在这章,我们将介绍如何使用常用的控件设计实用的界面. Android中的视图都是继承Vi ...

随机推荐

  1. Flask-SQLAlchemy插件

    一,初始化 两种方式: db = SQLAlchemy() def create_app(): app = Flask(__name__) db.init_app(app) return app ap ...

  2. String不得不说的那些事

    一.String.StringBuilder和StringBuffer的区别 1. String是字符串常量,StringBuilder和StringBuffer是字符串变量 String对象创建完成 ...

  3. 生成代码的代码 之 POJO生成器 之二 模板实现

    在之前的一篇博客中,我们写了利用node.js来生成JAVA的POJO代码的方法.有评论说可以利用模板来做这件事.当时认为模板只能做简单的字符串替换,所以可能无法完成任务.但是,仔细的学习了一个模板 ...

  4. 生成代码的代码 之 POJO生成器

    我们在写Java代码时候,有时候需要写一些POJO类,也就是只有一些属性和get, set方法的类.例如,在写REST 服务时候,利用Jersery + Jackson,可以把输入的JSON字符串自动 ...

  5. editplus来编写html

    本来写这篇文章,我可以有很多废话,但是很多都过去了,言而总之下:我暂且给这个方法起个名字,叫做“为之法”,因为有了这篇文章,很多人的想法会豁然开朗,那样有了个名字交流传阅起来就方便多了. 本方法依托于 ...

  6. WebFlux基础之响应式编程

    上篇文章,我们简单的了解了WebFlux的一些基础与背景,并通过示例来写了一个demo.我们知道WebFlux是响应式的web框架,其特点之一就是可以通过函数式编程方式配置route.另外究竟什么是响 ...

  7. TensorFlow object detection API应用--配置

    目标检测在图形识别的基础上有了更进一步的应用,但是代码也更加繁琐,TensorFlow专门为此开设了一个object detection API,接下来看看怎么使用它. object detectio ...

  8. java中this$0 this$1 this$2

    import java.lang.reflect.Field; public class Outer {//this$0 public class FirstInner {//this$1 publi ...

  9. Tomcat学习总结（15）—— Tomcat优化时的参数分析

    (1).maxHttpHeaderSize=”8192” 此选项用于配置:来自于客户端请求的Request和Response的HTTP header 的最大长度,以字节计算.如果不设置,该属性为409 ...

  10. 更改导入项目时weblogic运行库

    1.在项目上点击右键->Properties->Server->选择weblogic的server->点击Apply按钮:2.在项目上点击右键->Properties-& ...