css两种布局方式

最新推荐文章于 2024-07-25 10:18:55 发布

如之何如之何

最新推荐文章于 2024-07-25 10:18:55 发布

阅读量194

点赞数

分类专栏： html+css+javascript笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_53450038/article/details/126130915

版权

文章目录

1.Flex弹性盒模型
2.grid网格布局

1.Flex弹性盒模型

Flex布局可以简便、完整、响应式地实现各种页面布局。

作用在flex容器上	作用在flex子项上
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flex-basis
align-items	flex
align-content	align-self

1.1 flex-direction

flex-direction用于控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。

取值	含义
row	默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右
row-reverse	显示为行，但方向和row属性值是反地
column	显示为列
column-reverse	显示为列。但方向和column属性值是反地

<style>
  #box {
     
    width:300px;
    height:300px;
    border:1px solid black;
    margin:20px auto;
    display:flex;
    flex-direction:column-reverse;
  }
  #box div {
     
    width:50px;
    height: 50px;
    color:white;
    background: red;
    line-height:50px;
    text-align:center;
  }
</style>
<head>
  <div id="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</head>

1.2 flex-wrap

flex容器会使多出容器地部分自行进行调节
flex-wrap用来控制子项整体单行显示还是换行显示

取值	含义
nowrap	默认值，表示单行显示，不换行
wrap	宽度不足换行显示
wrap-reverse	宽度不足换行显示，但是从下往上开始。

<style>
  #box2 {
     
  width:300px;
  height:300px;
  border:1px solid black;
  margin:20px auto;
  display:flex;
  flex-wrap:wrap;
}
</style>
<body>
  <div id="box2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
</body>

1.3 flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。
第一个值表示方向，第二个值表示换行，中间用空格隔开。

<style>
  #box2 {
     
    width:300px;
    height:300px;
    border:1px solid black;
    margin:20px auto;
    display:flex;
    flex-flow: row wrap;
  }
</style>

1.4 justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式

取值	含义
flex-start	默认值，表现为起始位置对齐
flex-end	表现为结束位置对齐
center	表现为居中对齐
space-between	表现为两端对齐。between是中间的意思，表示多余的空白间距只在元素中间的区域分配
space-around	around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白的一半。
space-evenly	evenly是匀称、平等的意思，也就是视觉上，每个flex子项两侧空白间距也都相等

<style>
  #box3 {
     
    ...
    display:flex;
    /* 
    justify-content值: 
    flex-start
    flex-end
    center
    space-between
    space-around
    space-evenly
    */
    justify-content: flex-end;
  }
</style>
<body>
  <div id="box3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>

1.5 align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。

取值	含义
stretch	默认值，flex子项拉伸满整个父容器
flex-start	表现为容器顶部对齐
flex-end	表现为容器底部对齐
center	表现为垂直居中对齐

<style>
  #box4 {
     
    width:300px;
    height:300px;
    border:1px solid black;
    margin:20px auto;
    display:flex;
    flex-wrap: wrap;
    justify-content:space-evenly;
  }
  #box4 div {
     
    width:50px;
    /* height: 50px; */
    background: red;
  }
</style>
<body>
  <div id="box4">
    <div>测试文本</div>
    <div>测试文本</div>
    <div>测试文本测试文本测试文本</div>
    <div>测试文本测试文本测试文本</div>
    <div>测试文本测试文本测试文本</div>
    <div>测试文本测试文本测试文本</div>
    <div>测试文本测试文本测试文本</div>
    <div>测试文本测试文本测试文本</div>
  </div>
</body>

1.6 align-content

align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一列，则align-content属性是没有任何效果的。

取值	含义
stretch	默认值，每一行flex元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度都是50%
flex-start	表现为起始位置对齐
flex-end	表现为结束位置对齐
center	表现为居中对齐
space-between	表现为两端对齐。
space-around	每一行元素上下都享有独立不重叠的空白空间
space-evenly	每一行元素都完全上下等分

<style>
  #box4 {
     
    width:300px;
    height:300px;
    border:1px solid black;
    margin:20px auto;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    align-content:space-evenly;
  }
</style>
<body>
  <div id="box4">
    <div>测试文本</div>
    <div>测试文本</div>
    <div>测试文本测试文本测试文本</div>
    <div>测试文本测试文本测试文本</div>
    <div>测试文本测试文本测试文本</div>
    <div>测试文本测试文本测试文本</div>
    <div>测试文本测试文本测试文本</div>
    <div>测试文本测试文本测试文本</div>
  </div>
</body>

1.7 作用在flex子项上的CSS属性

取值	含义
order	可以通过设置order改变某一个flex子项的排序位置，所有flex子项的默认order属性值是0
flex-grow	属性中的grow是扩展的意思，扩展就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余空白空隙。默认值是0
flex-shrink	属性中的是shrink是收缩的意思，flex-shrink主要是处理当flex容器空间不足时候，单个元素的收缩比例，默认值是1
flex-basis	flex-basis定义了在分配剩余空间之前元素的默认大小
flex	flex属性是flex-grow，flex-shrink和flex-basis的缩写
align-self	align-self指控制单独某一个flex子项的垂直对齐方式

<style>
  #box {
     
    width:300px;
    height:300px;
    border:1px solid black;
    margin:20px auto;
    display: flex;
    justify-content:space;
  }
  #box div {
     
    width:50px;
    height:50px;
    color:white;
    line-height:50px;
    text-align:center;
    background:red;
  }
</style>
</head>
<body>
  <div id="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</body>

order 控制子项的排序

<style>
	/* 控制子项的排序顺序 */
  #box div:nth-child(2) {
     
    order:1;
  }
  #box div:nth-child(3) {
     
    order:-1;
  }
</style>

在这里插入图片描述

最低0.47元/天解锁文章

如之何如之何

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css两种布局方式

184-197
复制链接

扫一扫

专栏目录