Skip to content

C
Coding Tree

檀越@新空间 / Coding Tree

通知 2
Star 0
Fork 0
C
Coding Tree
提交 937951c7 编写于 作者: 彭世瑜's avatar 彭世瑜
浏览文件
操作

fix

上级 05a9c0f1
隐藏空白更改
内联 并排
Showing with 307 addition and 2 deletion
blog/front-end-combat/demo/felx-wrap.html 0 → 100644
浏览文件 @ 937951c7
<!DOCTYPE html>
<html lang="en">
<body>
<style>
.box-wrap {
margin: 0 auto;
display: flex;
/* 换行显示 */
flex-wrap: wrap;
/* 行对齐方式 */
align-content: space-between;
width: 200px;
height: 500px;
border: 1px solid #666;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<div class="box-wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
\ No newline at end of file
blog/front-end-combat/demo/flex-align.html 0 → 100644
浏览文件 @ 937951c7
<!DOCTYPE html>
<html lang="en">
<body>
<style>
h3{
text-align: center;
}
.box-wrap {
width: 500px;
margin: 0 auto;
display: flex;
height: 200px;
border: 1px solid #666;
}
.box {
width: 100px;
background-color: skyblue;
}
.box-wrap-height .box {
height: 100px;
}
/* 拉伸 */
.stretch {
align-items: stretch;
}
/* 顶对齐 */
.flex-start {
align-items: flex-start;
}
/* 底对齐 */
.flex-end {
align-items: flex-end;
}
/* 上下居中 */
.center {
align-items: center;
}
.child-center .box:nth-child(2){
align-self: center;
}
</style>
<h3>子元素没有设置高度，默认撑开和父级一样高</h3>
<div class="box-wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h3>子元素没有设置高度，默认：align-items: stretch;</h3>
<div class="box-wrap stretch">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h3>子元素设置高度，默认</h3>
<div class="box-wrap box-wrap-height">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h3>子元素设置高度，默认：align-items: flex-start;</h3>
<div class="box-wrap box-wrap-height flex-start">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h3>align-items: flex-end;</h3>
<div class="box-wrap box-wrap-height flex-end">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h3>align-items: center;</h3>
<div class="box-wrap box-wrap-height center">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h3>设置单独子元素 align-self: center</h3>
<div class="box-wrap box-wrap-height child-center">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
\ No newline at end of file
blog/front-end-combat/demo/flex-direction.html 0 → 100644
浏览文件 @ 937951c7
<!DOCTYPE html>
<html lang="en">
<body>
<style>
.box-wrap {
margin: 0 auto;
display: flex;
/* 修改主轴方向为垂直方向 */
/* 先确定主轴方向，再设置主轴或侧轴对齐 */
flex-direction: column;
/* 视觉效果：垂直居中 */
justify-content: center;
/* 视觉效果：水平居中 */
align-items: center;
width: 500px;
height: 200px;
border: 1px solid #666;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<div class="box-wrap">
<div class="box"></div>
</div>
</body>
</html>
\ No newline at end of file
blog/front-end-combat/demo/flex-flex.html 0 → 100644
浏览文件 @ 937951c7
<!DOCTYPE html>
<html lang="en">
<body>
<style>
.box-wrap {
width: 500px;
margin: 0 auto;
display: flex;
height: 200px;
border: 1px solid #666;
}
/* 固定尺寸 */
.box-1 {
width: 100px;
background-color: skyblue;
}
/* 占 3/4 */
.box-2 {
flex: 3;
background-color: yellow;
}
/* 占 1/4 */
.box-3 {
flex: 1;
background-color: green;
}
</style>
<div class="box-wrap">
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
</div>
</body>
</html>
\ No newline at end of file
blog/front-end-combat/flex.md
浏览文件 @ 937951c7
...@@ -65,6 +65,90 @@ Flex 布局模型中，可以调节主轴或侧轴的对齐方式来设置盒子 ...@@ -65,6 +65,90 @@ Flex 布局模型中，可以调节主轴或侧轴的对齐方式来设置盒子
[](demo/flex-1.html ':include :type=code') [](demo/flex-1.html ':include :type=code')
[](demo/flex-1.html ':include height=900') [](demo/flex-1.html ':include')
https://www.bilibili.com/video/BV1xq4y1q7jZ?p=67&spm_id_from=pageDriver
## 侧轴对齐方式 align-items
容器属性 align-items
元素属性 align-self
属性值 | 作用
- | -
flex-start | 默认值，起点开始依次排列
flex-end | 重点开始依次排列
center | 沿侧轴居中排列
stretch | 默认值，弹性盒子沿着主轴线被拉伸至铺满容器
示例:
[](demo/flex-align.html ':include :type=code')
[](demo/flex-align.html ':include height=900')
## 伸缩比flex
语法
```css
flex: 数值;
```
> 注意：占用父级剩余尺寸的份数
示例:
[](demo/flex-flex.html ':include :type=code')
[](demo/flex-flex.html ':include height=220')
移动端触发区域默认大小 44x44
## 主轴方向 flex-direction
修改主轴方向，实现改变元素排列方向
主轴默认是水平方向，侧轴默认是垂直方向
属性值 | 作用
- | -
row | 默认值，行，水平
column | 列，垂直
row-reverse | 行，从右往左
column-reverse | 列，从下到上
示例:
[](demo/flex-direction.html ':include :type=code')
[](demo/flex-direction.html ':include height=220')
## 弹性盒子换行 flex-wrap
实现多行排列效果
语法
```css
felx-wrap: nowrap/wrap
```
属性值 | 作用
- | -
nowrap | 默认值，不换行
wrap | 换行
## 行对齐方式 align-content
取值和justify-content基本相同
示例:
[](demo/felx-wrap.html ':include :type=code')
[](demo/felx-wrap.html ':include height=620')
https://www.bilibili.com/video/BV1xq4y1q7jZ?p=89&spm_id_from=pageDriver
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或