美文网首页
flex布局

flex布局

作者: 不懂套路 | 来源:发表于2018-10-10 19:10 被阅读0次

前言

在css中其实也学过布局,利用display,float,position进行的布局,而最近微信小程序开发的学习是又学到了新的布局(涉及的比较晚,所以现在才知道而已,其实早都有了),因此来记录一下学习过程。

一、flex布局定义

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何的容器(盒子)中都可以用flex属性。

.box{
display:flex;
}

或者行内的flex属性设置。

.box{
display:inline-flex;
}

二、容器的属性

在进行了display的属性设置后,这是容器拥有了以下几个属性可以设置。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
    以下对其中几个进行简要的说明,因为其中一些属性接触的次数也不多,所以没有太多可以讲的。

2.1 flex-direction

.box{
flex-direction: row | row-reverse | column | column-reverse
}
其中row为默认值,代表将元素以行排列(以左为起点)。row-reverse代表以右为起点进行行排列。column代表从页面上方进行列排列。column-reverse代表从页面下方进行列排列。效果图如下:

test1.png

其实这个属性是用的最多的,因为在他很方便,而且目前阶段我对它的接触最多,因此运用的还算熟练。

2.2 flex-wrap

默认将项目排在一条线上,不换行。而 flex-wrap的属性则设定如何换行。

.box{
flex-wrap: nowarp | wrap | wrap-reverse;
}

nowrap(默认)为不换行,项目全部排列在一行。
wrap为换行,第一行在上面。
wrap-reverse为换行,但是第一行在下面。

2.3 flex-flow

该属性为flex-direction和flex-wrap的简写形式。

.box{
flex-direction: flex-direction || flex-wrap;
}
书写格式为先写flex-direction的值,再写flex-wrap的值。两个中间加空格。

相关文章

  • flex布局

    认识flex布局 flex布局(Flexible 布局,弹性布局)开启了flex布局的元素叫flex contai...

  • 初见FLEX

    FLEX布局 一种新的布局方式,flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...

  • Flex 布局教程

    一、Flex 布局教程:语法篇 Flex 布局教程:语法篇 二、Flex 布局教程:实例篇 Flex...

  • css flex布局详解

    css flex布局详解 css flex布局详解1css flex布局详解2

  • Flex

    阮一峰-Flex布局 阮一峰-Flex布局实例教程 Flex布局 块级元素 行内元素 注意,设为 Flex 布局...

  • flex布局学习笔记

    经典教程 Flex 布局教程:语法篇Flex 布局教程:实例篇flex布局游戏 理解 flex布局实现需要至少两层...

  • 6Flex 布局

    Flex,(Flexible Box),意为"弹性布局"采用 Flex 布局的元素,为 Flex 容器(flex ...

  • css flex

    css flex布局 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称“容器...

  • Flex布局(语法篇)

    一、介绍Flex布局 什么是Flex布局呢?Flex布局:又称弹性布局,它是Flexible Box 的缩写,它为...

  • Day02_flex布局

    一、flex布局介绍: 1、又名Flexible 布局,弹性布局;2、开启了 flex 布局的元素叫 flex c...

网友评论

      本文标题:flex布局

      本文链接:https://www.haomeiwen.com/subject/lqkmaftx.html