Vue 中 Flex布局

Posted 2023-03-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 中 Flex布局相关的知识，希望对你有一定的参考价值。

参考技术A

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

display: flex;
display: inline-flex;

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

以下6个属性设置在容器上。

flex-direction属性决定主轴的方向（即项目的排列方向）。

它可能有4个值。

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content属性定义了项目在主轴上的对齐方式。

它有5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

align-items属性定义项目在交叉轴上如何对齐。

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

该属性可能取6个值。

小结：
justify 是对主轴对齐方式。
align开头的都是对交叉轴进行排列的项目。

以下6个属性设置在项目上。

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

接下来需要添加一些Css弹性盒子：桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解

参考文章：
https://blog.csdn.net/m0_46267097/article/details/108576784
https://blog.csdn.net/m0_37058714/article/details/80765562

前端vue实现圣杯布局flex布局浮动布局

有志者事竟成，破釜沉舟百二秦关终属楚
苦心人天不负，卧薪尝胆三千越甲可吞吴。

📌博主介绍

💒首页:水香木鱼

🛫专栏：邂逅CSS

✍简介: 博主姓：陈，名：春波。花名 “水香木鱼”，星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”

🔰 格言: 生活是一面镜子。你对它笑，它就对你笑；你对它哭，它也对你哭。

🔋 小目标: 成为 会设计、会开发的 “万能钥匙”

📝文章内容

本期，木鱼带给大家的是前端实现圣杯布局,常用的两种实现方案

✍ 一、flex实现圣杯布局【推荐】

本次使用的是flex布局，使用flex和order 实现圣杯布局

flex 【让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容】
order 【设置弹性盒对象元素的顺序】

<template>
  <div class="out_Container">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
  </div>
</template>

<style lang="less" scoped>
.out_Container
  width: 100%;
  height: 100px;
  display: flex;
  background-color: #42b983;
  .left
    background-color: #2c3e50;
    flex: 250px 0 0;
    order: 1;
  
  .middle
    background-color: #0189ec;
    flex: auto 1 0;
    order: 2;
  
  .right
    background-color: darkred;
    flex: 250px 0 0;
    order: 3;
  

</style>

✍ 二、浮动实现

圣杯盒子排列顺序【left right middle】
使用float 属性

<template>
  <div class="container">
  	<!--注意盒子的排列顺序-->
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="middle">中间</div>
  </div>
</template>

<style lang="less" scoped>
.container
  width: 100%;
  .left
    float: left;/*左浮动*/
    width: 220px;
    height: 100px;
    background-color: blue;
  
  .right
    float: right;
    width: 220px;
    height: 100px;
    background-color: red;
  
  .middle
    height: 100px;/*右浮动*/
    overflow: hidden;/*清除浮动*/
    background-color: yellow;
  

</style>

📢博主致谢

非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了【前端vue实现圣杯布局【flex布局、浮动布局】】，希望可以帮到大家，谢谢。
如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟
🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕