html实现水平排列元素

设置一个div的css属性

.container{
            display: flex;/*内容显示方式flex*/
            flex-direction: row;/*内容水平排列*/
        }

只需要将元素加入div就可以了，实现水平排列

<div style="container">
<p>fdfd</p>
<button>fddd</button>
</div>

如何实现一部分元素靠右对齐，一部分靠左对齐。在div的css属性里面设置水平靠末尾排列。自动实现右对齐排列

.container{
            display: flex;/*内容显示方式flex*/
            flex-direction: row;/*内容水平排列*/
    justify-content: flex-end;/*从末尾排列，实现内容靠右对齐*/
        }

靠左对齐的元素加入css属性。就可以实现左对齐。靠右对齐的元素正常添加

margin-right: auto;

<div style="container">
<!--左对齐-->
<p style="margin-right: auto;">fdfd</p>
<!--右对齐-->
<button>fddd</button>
<button>fffere</button>
</div>

解释justify-content

/* Positional alignment */
justify-content: center; /* 居中排列 */
justify-content: start; /* Pack items from the start */
justify-content: end; /* Pack items from the end */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end; /* 从行尾位置开始排列 */
justify-content: left; /* Pack items from the left */
justify-content: right; /* Pack items from the right */

/* Baseline alignment */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* Distributed alignment */
justify-content: space-between; /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around; /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly; /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
justify-content: stretch; /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: unset;