理解Flex布局

作者: 姚冰coding | 来源:发表于2017-07-04 21:22 被阅读0次

Flex布局

再不写点东西,我觉得我可能很久都会这样懒下去....

最近项目上要写不少前端页面,flex布局也学了一段时间,但是一直不怎么会用,所以,那就没有困难,创造困难,Flex走起~

Flex 到底是什么东西?

传统布局方式是基于盒模型的布局,核心是绝对定位,相对定位等。很长时间,占据着定位的主流地位。

而移动端的兴起,传统的定位显得力不从心。Flex应运而生,移动端布局没有Pc端的历史包袱,相关技术的演进非常快。

Flex即弹性布局。

Flex 为什么我学不会?

其实Flex的属性并不多,但是掌握起来并不容易。一方面可能练习比较少,另一方面没有真正的理解Flex布局。

Flex 的核心是横轴和纵轴

bg2015071004.png

不用去管那么多的属性,理解Flex的核心就是理解横轴和纵轴。如上图所示,在flex容器中,假设横向为主轴(flex-direction),那么通过主轴就能控制内部元素的横向对齐方式(justify-content):居左(flex-start),居中(center),居右(flex-end),两端对齐(space-between),每个项目间隔(space-around)。

这时候纵向其实也是类似的情况。

其实这时候,已经基本理解了Flex布局,当然还有相关的项目属性,可以通过查阅手册去理解。

相关文章

  • flex布局学习笔记

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

  • 关于 Flex 中的 flex-grow、flex-shrink

    在使用 flex 布局的时候难以理解的是 flex-grow、flex-shrink、flex-basis 几个属...

  • flex-grow、flex-shrink、flex-basis

    在使用 flex 布局的时候难以理解的是 flex-grow、flex-shrink、flex-basis 几个属...

  • 理解Flex布局

    Flex布局 再不写点东西,我觉得我可能很久都会这样懒下去.... 最近项目上要写不少前端页面,flex布局也学了...

  • flex:1及flex取值的理解

    1. flex布局 参照:阮一峰的文章 2. flex:1的理解 2.1 概念 flex:是 flex-grow、...

  • flex布局

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

  • flex布局

    By Leaf 一、简单理解flex布局 首先我们来理解一下flex布局的一些基本概念(图是我从网上找来的,我觉得...

  • 透彻解析flex-basic

    一直对flex布局的flex-basic理解不够透测,今天准备通过实际的例子,加深对这个属性的理解 flex-ba...

  • 初见FLEX

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

  • Flex 布局教程

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

网友评论

    本文标题:理解Flex布局

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