Flex布局学习札记

最新推荐文章于 2024-08-01 16:27:16 发布

安静的Sunny

最新推荐文章于 2024-08-01 16:27:16 发布

阅读量328

点赞数 1

分类专栏：《JavaScript》

本文链接：https://blog.csdn.net/u011153817/article/details/54863449

版权

《JavaScript》专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、概述

随着移动互联网的发展，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>