AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

拿骰子来练习flex布局

2023-11-30 60
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 一点css

1053722308.png

一点

css

.root {
    width: 300px;
    height: 300px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 2px 8px rgb(0 0 0 / 10%);
}
.p {
    background-color: red;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%) inset;
}

html

<div class="root">
    <div class="p"></div>
</div>

二点

css

.root {
    width: 300px;
    height: 300px;
    border-radius: 16px;
    box-shadow: 1px 2px 8px rgb(0 0 0 / 0.1);
    display: flex;
    margin-top:100px;
    justify-content: space-between;
    padding: 12px;
    box-sizing: border-box;
}
.p {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%) inset;
    background-color: red;
}
.p:nth-child(2) {
    align-self: flex-end;
}

html

<div class="root">
    <div class="p"></div>
    <div class="p"></div>
</div>

三点

css

.root {
    width: 300px;
    height: 300px;
    border-radius: 16px;
    box-shadow: 1px 2px 8px rgb(0 0 0 / 0.1);
    display: flex;
    margin-top:100px;
    justify-content: space-between;
    padding: 12px;
    box-sizing: border-box;
}
.p {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%) inset;
    background-color: red;
}
.p:nth-child(2) {
    align-self: center;
}
.p:nth-child(3) {
    align-self: flex-end;
}

html

<div class="root">
    <div class="p"></div>
    <div class="p"></div>
    <div class="p"></div>
</div>

四点

从4点开始要有分组的思想！且上下排列

css

.root {
    width: 300px;
    height: 300px;
    border-radius: 16px;
    box-shadow: 1px 2px 8px rgb(0 0 0 / 0.1);
    display: flex;
    margin-top:100px;
    padding: 12px;
    box-sizing: border-box;
    flex-direction: column;
    /* justify-content 是设置主轴 */
    /* 主轴 是垂直方向 */
    justify-content: space-between; 
}
.p {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%) inset;
    background-color: red;
}
.row {
    display: flex;
    /* justify-content 是设置主轴 */
    /* 主轴 是水平方向 */
    justify-content: space-between;
}

html

<div class="root">
    <div class="row">
        <div class="p"></div>
        <div class="p"></div>
    </div>
    <div class="row">
        <div class="p"></div>
        <div class="p"></div>
    </div>
</div>

五点

css

.root {
    width: 300px;
    height: 300px;
    border-radius: 16px;
    box-shadow: 1px 2px 8px rgb(0 0 0 / 0.1);
    display: flex;
    margin-top: 100px;
    padding: 12px;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-between;
}
.p {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%) inset;
    background-color: red;
}
.row {
    display: flex;
    justify-content: space-between;
}
.row:nth-child(2) {
    justify-content: center;
}

html

<div class="root">
    <div class="row">
        <div class="p"></div>
        <div class="p"></div>
    </div>
    <div class="row">
        <div class="p"></div>
    </div>
    <div class="row">
        <div class="p"></div>
        <div class="p"></div>
    </div>
</div>

六点

css

.root {
    width: 300px;
    height: 300px;
    border-radius: 16px;
    box-shadow: 1px 2px 8px rgb(0 0 0 / 0.1);
    display: flex;
    margin-top: 100px;
    padding: 12px;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-between;
}
.p {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%) inset;
    background-color: red;
}
.row {
    display: flex;
    justify-content: space-between;
}

html

<div class="root">
    <div class="row">
        <div class="p"></div>
        <div class="p"></div>
    </div>
    <div class="row">
        <div class="p"></div>
        <div class="p"></div>
    </div>
    <div class="row">
        <div class="p"></div>
        <div class="p"></div>
    </div>
</div>

文章标签：
前端开发
DyeDD
目录
相关文章
我是快乐的嘟嘟
|
1月前
flex布局属性简介
flex布局属性简介
我是快乐的嘟嘟
141 57
小徐在进步
|
16天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式，通过给父元素设置`display: flex`，其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子，主轴默认为水平方向，侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制，侧轴对齐方式包括`align-items`（针对所有子元素）和`align-self`（针对单个子元素）。修改主轴方向使用`flex-direction`属性，`flex`属性用于控制子元素在主轴上的伸缩比例。此外，`flex-wrap`属性允许子元素换行，而`align-content`属性则定义多行对齐方式。
小徐在进步
41 9
孙飞i
|
1月前
|
前端开发
FLex布局详解
Flex布局通过`flex-direction`定义主轴方向，包括横向`row`、反向横向`row-reverse`、纵向`column`及反向纵向`column-reverse`。`justify-content`控制主轴上子元素的排列，如起始端`flex-start`、末端`flex-end`、居中`center`、等间距`space-around`或两端对齐`space-between`。在Y轴上设置这些同样有效。`flex-wrap: wrap`使子元素在需要时换行。`align-items: center`实现侧轴（交叉轴）上的居中对齐
孙飞i
49 1
FLex布局详解
theMuseCatcher
|
30天前
|
JavaScript
Vue3弹性布局（Flex）
这是一个基于 Vue 的弹性布局组件库，提供了丰富的参数配置，如宽度、方向、换行等，支持自定义对齐方式和间隙设置。在线预览展示了不同布局效果，包括单选、按钮和滑动输入条等组件的使用示例。
theMuseCatcher
39 0
Vue3弹性布局（Flex）
游客fz577umxdejsg
|
1月前
|
前端开发 容器
掌握弹性盒子布局（Flex）：打造灵活的网页布局
掌握弹性盒子布局（Flex）：打造灵活的网页布局
游客fz577umxdejsg
38 0
阿福的工作室
|
1月前
|
容器
Flex 布局
Flex 布局
阿福的工作室
31 0
白如意i
|
1月前
|
前端开发 JavaScript API
如何在 Angular 中使用 Flex 布局
如何在 Angular 中使用 Flex 布局
白如意i
31 0
1941623231718325
|
2月前
|
编解码 前端开发 容器
CSS Flex布局实战案例：构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤，我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码，还让我们能够轻松实现复杂的布局效果，如响应式设计。在实战中，掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
1941623231718325
73 2
朝阳39
|
2月前
|
前端开发
css的flex布局中使用margin:auto智能分配剩余空间
css的flex布局中使用margin:auto智能分配剩余空间
朝阳39
39 1
G佳伟
|
2月前
|
小程序
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题：设置了word-break: break-all；和flex: 1；冲突flex不生效问题
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题：设置了word-break: break-all；和flex: 1；冲突flex不生效问题
G佳伟
57 1