CSS伸缩盒模型Flex

<style>
  .outer{
    width:1000px;
    height:600px;
    background-color：#888；
    display:flex;//outer为伸缩容器。
}

.inner{
        width:200px;
        height:200px;
        background-color:skyblue;
        border:1px solid black;
        box-sizing:border-box;
}
</style>
<!-- inner为伸缩项目-->
<body>
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
</div>
</body>

伸缩项目会块化。如span也会变为display:block;
仅伸缩容器的子元素为伸缩项目，孙元素以下都不是伸缩项目。

2.主轴方向
伸缩项目沿主轴排列，默认从左到右
与主轴垂直的轴为侧轴，默认从上到下。
调整主轴方向

/* 文本排成行的方向  从左到右*/
flex-direction: row;

/* 类似于 <row>，但方向相反  从右到左*/
flex-direction: row-reverse;

/* 文本行堆叠的方向 从上到下 */
flex-direction: column;

/* 类似于 <column>，但方向相反 从下到上 */
flex-direction: column-reverse;

3.主轴上的换行方式
flex-wrap:nowrap;

flex-wrap: nowrap; /* Default value 不换行 */
flex-wrap: wrap;//换行
flex-wrap: wrap-reverse;//反向换行。

4.flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

5.主轴的对齐方式
justify-content
https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content

6.侧轴对齐方式
/侧轴的起始位置/

align-items: baseline;//基线对齐
align-items: center;//中点
align-items: start;
align-items: end;
align-items: flex-start;//起始位置
align-items: flex-end;//结束位置
align-items: self-start;
align-items: self-end;
align-items: stretch;//拉伸到整个父容器，伸缩项目不能给高度。默认值

7.align-content//侧轴的对齐方式，多行

/* 基本位置对齐 */
/*align-content 不采用左右值 */
align-content: center; /* 将项目放置在中点 */
align-content: start; /* 最先放置项目 */
align-content: end; /* 最后放置项目 */
align-content: flex-start; /* 从起始点开始放置 flex 元素 */
align-content: flex-end; /* 从终止点开始放置 flex 元素 */
/* 分布式对齐 */
align-content: space-between; /* 均匀分布项目
                                 第一项与起始点齐平，
                                 最后一项与终止点齐平 */
align-content: space-around; /* 均匀分布项目
                                 项目在两端有一半大小的空间*/
align-content: space-evenly; /* 均匀分布项目
                                 项目周围有相等的空间 */
align-content: stretch; /* 均匀分布项目
                                 拉伸‘自动’ - 大小的项目以充满容器 */

8.基准长度
flex-basis
CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
默认值为auto
主轴横向设置的宽失效，主轴纵向设置的高失效。

9.flex-grow
CSS 属性 flex-grow CSS 设置 flex 项主尺寸的 flex 增长系数。
默认值为0。值为1表示平分。值为1,2,3 分1/6 2/6 3/6

10.flex-shrink
CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

11.flex简写

//可以拉伸 可以压缩 不设置基准长度 简写为flex:auto;
flex:1 1 auto;
//可以拉伸，可以压缩，基准长度为0，可简写为flex:1;
flex: 1 1 0;
//不可以拉伸，不可以压缩，不设置基准长度 可简写为flex:none;
flex:0 0 auto;
//不可以拉伸，可以压缩。不设置基准长度，可简写为flex:0 auto;
flex: 0 1 auto;

https://www.w3schools.com/css/css3_flexbox.asp

flex-item
https://www.w3schools.com/css/css3_flexbox_items.asp

posted @ 2025-01-06 11:58 zhongta 阅读(13) 评论(0) 收藏举报

刷新页面返回顶部

zhongta

CSS伸缩盒模型Flex

公告