flex对齐方式
    Flex性是一种有力的工具，通过它来控制元素在父元素的对齐方式。Flexbox型允许元素定位、定位以及居中，更大程度上改善了实现布局的工作量，可以更加容易和快速的实现完美的布局，大大减少了开发者的工作量。
    Flex性的基本概念是，子元素在父元素中的位置由两个属性来控制：justify-content性和align-items性。justify-content性控制子元素在主轴方向上的对齐，align-items性控制子元素在交叉轴方向上的对齐。
    一般来说，justify-content性用于控制元素在横轴上的对齐方式，它接受五个值。
    第一个值是flex-start，它表示子元素沿着父元素的开始位置对齐，也就是左对齐。
    第二个是flex-end，它表示子元素沿着父元素的结束位置对齐，也就是右对齐。
    第三个值是center，它表示子元素居中对齐。
    第四个值是space-between，它表示子元素在横轴上平均分布，并且两边的子元素紧靠父
元素的边界。
    第五个值是space-around，它表示子元素在横轴上平均分布，并且两边和中间的子元素紧靠父元素的边界。
    align-items性用于控制元素在纵轴上的对齐方式，它接受五个值。
    第一个值是 flex-start，它表示子元素沿着父元素的开始位置对齐，也就是顶部对齐。
    第二个值是flex-end，它表示子元素沿着父元素的结束位置对齐，也就是底部对齐。
html的flex布局
    第三个值是center，它表示子元素居中对齐。
    第四个值是stretch，它表示将可设定的高度设置为父元素的高度，也就是将高度拉伸至父元素的高度。
    最后，第五个值是baseline，它表示沿着父元素的基线对齐，即将子元素的第一行文本排列在父元素的第一行文本上。
    align-content性是一个非常实用的属性，它可以对多行的 flex器的子元素进行对齐，它接受七个值，比justify-content性多出了两个值，即stretchspace-evenly。
    第一个值是flex-start，它表示将所有行都排列在父元素的开始位置，即顶部对齐。
    第二个值是flex-end，它表示将所有行都排列在父元素的结束位置，即底部对齐。
    第三个值是center，它表示将所有行都居中对齐。
    第四个值是space-between，它表示在交叉轴（纵轴）上两边的行紧靠父元素的边界，而中间行之间的间隔相等。
    第五个值是space-around，它表示在交叉轴（纵轴）上两边和中间的行都紧靠父元素的边界，而中间行之间的间隔相等。
    第六个值是stretch，它表示拉伸所有的行，使它们的高度都与父元素的高度相同。
    最后，第七个值是space-evenly，它表示将所有行在交叉轴上平均分布，两边和中间的行都紧靠父元素的边界。
    Flex性可以为开发者提供了一种更加高效的方式来实现布局，它可以使开发者在不同的环境中更加容易的生成相同的布局，从而节省大量的开发时间。Flex性的几个关键属性，如justify-content性、align-items性align-content性，可以使开发者高效的实现布局，使布局在不同的环境中更加一致，也可以为开发者提供更多的灵活性以实现不同的布局。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。