Flex布局学习札记

来源：互联网发布：盗梦空间红辣椒知乎编辑：程序博客网时间：2024/06/08 06:46

一、概述

随着移动互联网的发展，HTML5越发流行起来。现在越来越多的公司都开始了混合开发。前不久，微信刚刚开放的微信小程序，更加使得HTML5名声大噪起来。

移动端不比PC端，它强调的是要流畅，用户体验要好，特别是现在的业务场景越来越复杂，使得页面的布局等也相应的复杂起来。在这种情况下，Flexible Box布局出现了，它使得布局变得简单起来，目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

二、什么是Flex布局

Flex是Flexible Box的简称，Flex布局又称“弹性布局”，它有很大的灵活性，是对传统网页布局的一种改良。虽然Flex布局与传统网页布局一样是基于Box模型(盒子模型)，但传统网页布局依赖以下三个属性：display、float、position。对于一些比较复杂的布局，它只能望洋兴叹，无能为力，比如：垂直居中。

Flex布局基于主轴与垂直于主轴的侧轴，就好比我们屏幕的X，y轴。同时位于Box里面的每一个块即为该容器的子元素，叫flexItem。如下图：

上面这个图其实有点小问题的，就是轴方向的问题，其实应该只画一个箭头。默认主轴是水平向右，左边起点为main start.结束点为main end。
同样垂直于主轴的侧轴垂直向下，上方起点为cross start，结束点为cross end。

盒子或flex container容器有以下6个重要的属性：
- flex-direction：用于决定子元素即flex item在主轴上的排列方向；

flex-wrap：用于如果子元素很多，多到在同一轴线上的排列不下的情况下时，怎么排列；
flex-flow：是flex-direction与flex-wrap两个的简写，即赋值时，得给出两个值，eg:flex-flow:row wrap
justify-content：用于确定flex item在容器主轴上的对齐方式；
align-items：用于确定flex item在垂直于主轴的侧轴上的对齐方式，用于只有一行item时；
align-content：与align-items的作用一样，只是它用于多行item,比如一个父元素里面包含三行子元素的时候，就可以用align-content来统一使这三行子元素对齐。

三、综合案例

<!DOCTYPE HTML><html><head><script type="text/javascript" src="jQuery.js"/><script> $(document).ready(function(){var temp = $(".div2").is(":visible");alert(temp);   if($("#p1").is(":visible")){     $(".div1").css("background-color","red");   }  });</script><style type="text/css"> .div1,.div2{   display:flex;   flex-direction:row;   flex-wrap:wrap;   justify-content:space-between;   align-items:stretch;  } #p1{ order:2 }#p3{ flex-shrink:0} #title1,#p1{ background:#98bf21 }</style></head><body><div class="div1"><h1 id="title1">标题1</h1><div class="div2"><div id="p1">这是一段文字</div><div id="p2">这是第二段文字</div><div id="p3">这是第三段文字</div></div></div></body></html>

1 0