justify-content: flex-end和justify-content: end的区别

在Flexbox布局中，"justify-content: flex-end" 和 "justify-content: end" 的区别在于它们的表现方式不一样。

1. "justify-content: flex-end" 表示横轴上将子元素放置到容器最后。即，在水平方向上被放置到其父元素容器的右侧（如果是LRTB方向）。同时，"justify-content: flex-end" 还可以与其他主轴方向属性一起使用，如 "flex-direction", "flex-wrap" 等，辅助实现多种复杂的布局效果。

   .container {
     display: flex;
     justify-content: flex-end; /* 将子元素放置到容器的末端 */
   }
   
   .item {
     width: 100px;
     height: 50px;
   }
   

2. "justify-content: end" 是CSS中指定一个块容器、表格单元格或表格标题内容沿其容器结束边缘对齐的值。这个属性只会影响行内级元素、表格元素以及浮动元素，而不会影响 Flexbox 或 Grid 布局。在Flexbox布局中使用 "justify-content: end" 时并未得到支持。

   .container {
     background-color: #F5F5F5;
     padding: 20px;
     border: 1px solid #CCCCCC;
     text-align: end; /* 将内容沿着容器的结束边缘对齐 */
   }

   因此，两个属性的作用和适用的范围不同，需要根据具体的使用场景进行选择。在应用 Flexbox 布局时，建议使用 "justify-content: flex-end"。