flex弹性盒子

最新推荐文章于 2024-07-04 00:59:27 发布

xzchiocezy

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量26

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/zhengying5dvhdg/article/details/133842907

版权

简介

2009年，W3C提出了一种崭新的方案----Flex布局（即弹性伸缩布局），它可以简便、完整、响应式地实现各种页面布局，包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。伸缩布局 = 弹性布局 = flex布局原理：通过给父盒子添加flex属性，来控制盒子的位置和排列方式弹性盒子分为两块：box布局（老版本）和flex布局（新版本） Flexbox模型是2012年9月提出的工作草案，这个草案是由W3C 推出的最新语法。这个版本立志于指定标准，让新式的浏览器全面兼容，在未来浏览器的更新换代中实现统一

容器属性(6 个):   项目属性（6个）
flex-direction 主轴方向   order
flex-wrap 主轴换行方式   flex-grow
flex-flow 符合形式   flex-shrink
justify-content 主轴对齐方式   flex-basis
align-items 交叉轴对齐方式   flex
align-content 多根主轴对齐方式   align-self

flex基础弹性盒子
语法：display：flex 表示给当前元素添加弹性盒子

案例一：使用flex弹性盒子让那个div里面的内容在一行显示

<style>
    .box{
        width: 100%;
        display: flex;
    }
    .inner{
        border: 1px solid #f00;
        background-color: aquamarine;
    }
</style>
<div class="box">
    <div class="inner">CSS和JavaScript的基础知识，并实践了一些前端开发的基础任务。我帮助团队成员修改了一些简单的样式bug，并参与了一些JavaScript的交互讨论。</div>
    <div class="inner">这一周我学到了很多关于前端开发和团队协作的知识和技能。我非常感激公司给我这个机会</div>
    <div class="inner">这一周我学到了很多关于前端开发和团队协作的知识和技能。我非常感激公司给我这个机会</div>
    <div class="inner">CSS和JavaScript的基础知识，并实践了一些前端开发的基础任务。我帮助团队成员修改了一些简单的样式bug，并参与了一些JavaScript的交互讨论。</div>
</div>

flex-direction 决定主轴方向（即项目排列方向）
属性值： row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。

 <style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           flex-direction: row-reverse;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 100px;
       }
</style>
<div class="box">
        <div class='inner'>1此概念于2010年5月由国外著名网页设计师Ethan Marcotte所提出。</div>
        <div class='inner'>2响应式网站设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整</div>
        <div class='inner'>3论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本</div>
</div>

row-reverse，起点在右端

<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 右对齐 */
           flex-direction: row-reverse;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 300px;
       }
</style>

column 从上往下按行排放

<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 从上往下排放 */
           flex-direction: column;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 300px;
       }
</style>

column-reverse 从下往上，数据颠倒排放

<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /*  从下往上，数据颠倒排放 */
           flex-direction: column-reverse;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 300px;
       }
</style>

flex-wrap 设置项目换行方式[使用的多]
默认情况下，项目都排在一条线(又称”轴线”)上。 flex-wrap 属性设置如果一条轴线排不下，项目如何换行。

warp换行

<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /*  换行显示 */
           flex-wrap: wrap;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 500px;
       }
</style>

warp-reverse

<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /*  换行显示，并且内容会颠倒 */
           flex-wrap: wrap-reverse;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 500px;
       }
</style>

flex-flow 主轴方向和换行方式的简写
语法：flex-flow：row nowarp 默认值：row nowrap

向右对齐并且换行

<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /*  颠倒显示，并且换行 */
           flex-flow: row-reverse wrap ;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 500px;
       }
</style>

justify-content 定义项目在主轴上的对齐方式【使用的多】
语法：justify-content：center 属性值：语法：justify-content：center 属性值： flex-start（默认值）：flex-start（默认值）：主轴起点对齐主轴起点对齐 flex-end：flex-end：主轴终点对齐主轴终点对齐 center：center：居中居中 space-between：space-between：两端对齐，项目之间的间隔都相等。两端对齐，项目之间的间隔都相等。 space-around：space-around：每个项目两侧的间隔相等。所以，项目之间间隔比项目与边框间隔大一倍。每个项目两侧的间隔相等。所以，项目之间间隔比项目与边框间隔大一倍

space-evenly：可以使每个元素之间和元素距离边距的距离都相等，但是兼容性比较差。

中间对齐，两侧不固定

<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 整体居中对齐 */
           justify-content: center;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 300px;
       }
</style>

平均分布，两侧没有缝隙

 <style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 两端对齐 */
           justify-content: space-between;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 300px;
       }
</style>

整行平均分布

<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 中间间距一致 */
           justify-content: space-around;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 300px;
       }
</style>

整个每个盒子之间的间距一致

<style>
    .box {
        display: flex;
        display: -webkit-flex;
        border: 1px solid #f00;
        /* 间距一致 */
        justify-content: space-evenly;
    }

    .inner {
        background-color: yellowgreen;
        border: 1px solid #f00;
        margin: 5px;
        padding: 5px;
        height: 200px;
        width: 300px;
    }
</style>
<div class="box">
    <div class="inner">项目1</div>
    <div class="inner">项目2</div>
    <div class="inner">项目3</div>
</div>

align-content属性起作用的条件【针对多行主轴】
对父元素设置自由盒属性display:flex;

并且设置排列方式为横向排列flex-direction:row; （默认值）

设置换行，flex-wrap:wrap;

align-items 项目在交叉轴上对齐方式【针对单个主轴】
语法：align-items:flex-end 属性值： flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为 auto，项目将占满整个容器的高度。

在交叉轴起点对齐

<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 交叉轴的起点对齐 */
           align-items: flex-start;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           width: 300px;
       }
</style>

在交叉轴终点对齐

<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 交叉轴的终点对齐 */
           align-items: flex-end;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           width: 300px;
       }
</style>

交叉轴的中心对齐

<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 交叉轴的中心对齐 */
           align-items: center;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           width: 300px;
       }
</style>

第一行文字的基线对齐

<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 交叉轴的基线对齐 */
           align-items: baseline;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           width: 300px;
       }
</style

xzchiocezy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
flex弹性盒子

语法：justify-content：center 属性值：语法：justify-content：center 属性值： flex-start（默认值）：flex-start（默认值）：主轴起点对齐主轴起点对齐 flex-end：flex-end：主轴终点对齐主轴终点对齐 center：center：居中居中 space-between：space-between：两端对齐，项目之间的间隔都相等。space-around：space-around：每个项目两侧的间隔相等。
复制链接

扫一扫