CSS3学习笔记

最新推荐文章于 2024-08-03 13:22:29 发布

懂点代码的朋友

最新推荐文章于 2024-08-03 13:22:29 发布

阅读量181

点赞数 1

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/wsongjun/article/details/74721967

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

弹性盒子

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: flex;
    /*display: -webkit-flex;*/
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>

</body>
</html>

flex-direction: 指定了弹性子元素在父容器中的排列

row：横向从左到右排列(默认)。
row-reverse：反转横向排列
column：纵向排列
column-reverse：反转纵向排列

justify-content: 内容对齐(应用在弹性容器上)

flex-start：弹性项目向行头紧挨着填充(默认)。
flex-end：弹性项目向行尾紧挨着填充。
center：弹性项目居中紧挨着填充。
space-between：弹性项目平均分布在该行上。
space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。

align-items: 设置子元素在侧轴（纵轴）方向上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch

flex-wrap: 指定子元素换行方式

nowrap: 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。

多媒体查询

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

懂点代码的朋友

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记

弹性盒子弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。<!DOCTYPE html><html><head><style>.flex-container { display: flex; /*display: -webkit-f
复制链接

扫一扫

专栏目录