Difference Between Flex-End and End

Difference between flex-end and end?

One value (end) is defined in the CSS Box Alignment specification, and is intended to apply to multiple box layout models (block, table, grid, flex, etc.)

The other value (flex-end) is defined in the CSS flexbox specification, and is intended to apply only to flex layout.

With the Box Alignment spec, the W3C is attempting to establish a universal language for the alignment of boxes in CSS. Eventually, the Box Alignment values will supersede the particular values defined in flex, grid and other specs.

For example:

• end will be used instead of flex-end
• column-gap will be used instead of grid-column-gap
• and so on.

Many Box Alignment values are already in use across major browsers. But full implementation is still a ways off, so it's still safer to use flex-end instead of end (and then count on long-term support for legacy names).

Here's an illustration from the Box Alignment spec:

§ 8.3. Legacy Gap Properties: the grid-row-gap,
grid-column-gap, and grid-gap properties

The Grid Layout module was originally written with its own set of gutter properties, before all such properties were unified into the existing row-gap / column-gap naming. For compatibility with legacy content, those legacy property
names must be supported as aliases:

• grid-row-gap must be treated as a shorthand for the row-gap property

• grid-column-gap must be treated as a shorthand for the column-gap
  property

• grid-gap must be treated as a shorthand for the gap property

In all three cases, the legacy properties must take the same grammar
as the property they are aliasing, and just "forward" the value to
their aliased property.

align-items: end difference between Chrome and Firefox

Google Chrome is almost correct (little different). Because the align-items property doesn't have a value of end.

8.3. Cross-axis Alignment: the align-items and align-self properties

• Name: align-items
• Value: flex-start | flex-end | center | baseline | stretch
• Initial: stretch
• Applies to: flex containers
• Inherited: no
• Percentages: n/a
• Computed value: specified keyword
• Canonical order: per grammar
• Animation type: discrete

However, it is not strictly correct. Because the value that can be applied by the align-items property will be replaced by that of Box Alignment Level 3, the align-items property defines a value of end in Box Alignment Level 3.

1.2. Module interactions

The CSS Box Alignment Module extends and supercedes the definitions of the alignment properties (justify-content, align-items, align-self, align-content) introduced here.

According to Chrome Platform Status, the implementation status of CSS Box Alignment Level 3 is under development.

Status in Chromium

Blink components: Blink

In development (tracking bug)

Reference:

• CSS Flexible Box Layout Module Level 1
• CSS Box Alignment - Chrome Platform Status

CSS Grid - Difference Between flex-start and Start Value in alignment/justifying Properties

no difference

flex-start

For items that are not children of a flex container, this value is treated like start.

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#values

Why is flex-end and flex-start the top and bottom with flex-direction:row

align-self works on the cross-axis so in a row it's a vertical alignment.

The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.

It's possible you meant justify-self but this does not have any effect in a flex row.

In flexbox layouts, this property is ignored.

If you need the buttons on the right side, you can employ the margin-left:auto option.

html, body { width: 100%; }
.flexbox {    flex-direction: row;    width: 100%;    display: flex;    align-items: center;}
#edit {  margin-left:auto;}

<div class="flexbox" *ngFor="let a of api.active_articles">    <a class="left">Name</a>    <a class="left">Description</a>    <button class="right" id="edit">Edit</button>    <button class="right" id="delete">Delete</button></div>

.flex-container {  color: white;  display: flex;  height: 300px;  background-color: yellow;  justify-content: space-between;  align-items: baseline;}.flex-item {  background-color: green;  width: 110px;  min-height: 100px;  margin: 10px;  box-sizing: border-box;  padding: 5px;  text-align: center;}.item1 {  font-size: 2em;  }.item2 {  font-size: 7em;  }.item3 {  font-size: .5em; }.item4 {  font-size: 3em;  }.item5 {  font-size: 10em; }
/*.item1 {  align-self: flex-start; }.item2 {  align-self: flex-end; }.item3 {  align-self: center; }.item4 {  align-self: baseline; }.item5 {  align-self: stretch; }*/
#dashed-line {  border: 1px dashed red;  position: absolute;  width: 100%;  top: 170px;}

<div class="flex-container">  <div class="flex-item item1">A</div>  <div class="flex-item item2">B</div>  <div class="flex-item item3">C</div>  <div class="flex-item item4">D</div>  <div class="flex-item item5">E</div></div>
<div id="dashed-line"></div>

  margin: 20px;
  display: flex;
  flex: 0 1 calc(25% - 40px);

#flexcontainer {  display: flex;  flex-wrap: wrap;  flex-direction: row;  justify-content: flex-end;  background: #ff8800;}.flexitem {  margin: 20px;  display: flex;  flex: 0 1 calc(25% - 40px);  background: #666666;  box-sizing: border-box;  height: 50px;}

<div id="flexcontainer">  <div class="flexitem"></div>  <div class="flexitem"></div>  <div class="flexitem"></div>  <div class="flexitem"></div>  <div class="flexitem"></div>  <div class="flexitem"></div></div>