云麓谷BO1

最新推荐文章于 2024-07-19 15:50:46 发布

YXF-ripple

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量195

点赞数

文章标签： css html flex

本文链接：https://blog.csdn.net/Ripplebody/article/details/109271963

版权

Html CSS、Flex弹性布局和git的使用
2020/10/25 郁小凡

使用以下代码将Html外的CSS与Html链接。

<head>
<link rel="stylesheet" href="文件所在地" type="text/css" media="all ">
</head>

在定义时需要确定“父子”关系并且为它们命名，方便CSS文件中的修饰与描述。
在编写CSS时需要注意格式与细节，保持代码的优雅。

Flexible Box意为“弹性布局”。任何容器、元素都可以指定为Flex布局。

采用Flex布局元素称为“容器”，所有子元素自动成为容器成员，称为“项目”。

容器有两轴，水平主轴和垂直的交叉轴。

flex-direction属性：决定主轴方向——row（水平左起），row-reverse（水平右起），column（垂直左起），column-reverse（垂直右起）。
flex-wrap属性：如何换行——nowrap（不换行默认），wrap（第一行在上方换行），wrap-reverse（第一行在下方换行）。
justify-content属性：主轴对齐方式——flex-start（左对齐默认），flex-end（右对齐），center（居中），space-between（两端对齐，项目间隔相同），space-around（每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍）。
align-items属性：交叉轴对齐方式——flex-start（起点对齐），flex-end（终点对齐），center（中点对齐），baseline（项目的第一行文字的基线对齐），stretch（如果项目未设置高度或设为auto，将占满整个容器的高度）。
其他：order属性——排列顺序，flex-grow——放大比例等。

对他人的仓库进行fork，并且修正。
full&request后，如果修改正确，原仓库主可以merge到自己仓库。

代码、程序的学习不是一蹴而就的，需要不断进行训练与学习，在遇到不懂时需要交流、探讨与请教。有一个良好的氛围可以让代码学习更加有趣并且轻松。

云麓谷的学习更加偏向于自主学习、引导与交流，而不是全盘教授。希望可以有更多训练的机会。

关注