CSS property update: align-items #34142

estelle · 2024-06-14T03:58:14Z

Updates to CSS property align-items:

text case and links to comply with MDN writing guidelines
move flex only values to the end of the values list
Add text around example to explain what is going on.
hide code not relevant to the property being discussed.
add colors to grid and flex so the user can see that the value has changed.

addressed as part of CSS baseline / interop openwebdocs/project#189 - subcomponent openwebdocs/project#202

github-actions · 2024-06-14T03:59:35Z

Preview URLs

/en-US/docs/Web/CSS/align-items

(comment last updated: 2024-06-17 13:55:36)

files/en-us/web/css/align-items/index.md

bsmth · 2024-06-14T09:40:30Z

files/en-us/web/css/align-items/index.md

+
+- `flex-start`
+
+  - : Used in flex layout only, aligns the flex items flush against the flex container's main-start or cross-start side.


do we have anything to link to from main-start and cross-start if a reader doesn't know what they are? Same below for main-end and cross-end.

i linked to the flex model in the sentence above

files/en-us/web/css/align-items/index.md

bsmth · 2024-06-14T09:49:57Z

files/en-us/web/css/align-items/index.md

 ```css
-#container {
+:where(#container) {
  height: 200px;
  width: 240px;


Want to make it a little wider? 500px container width and 100px wide children?

Suggested change

width: 240px;

width: 500px;

bsmth · 2024-06-14T09:50:32Z

files/en-us/web/css/align-items/index.md

+div > div {
+  box-sizing: border-box;
+  border: 2px solid #fff;
+  width: 50px;


See comment above about making it a little wider

Suggested change

width: 50px;

width: 100px;

bsmth · 2024-06-14T09:54:51Z

files/en-us/web/css/align-items/index.md

 ```html
 <div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
-  <div id="item4">4</div>
+  <div id="item4">4<br />4</div>


What do you think about this? I skipped the prose when looking at the live example at first and thought it was a typo.

Suggested change

<div id="item4">4<br />4</div>

<div id="item4">4<br />(line break)</div>

bsmth · 2024-06-14T09:56:34Z

files/en-us/web/css/align-items/index.md

 ```css
-#container {
+:where(#container) {


do we need where()?

the specificity of the #container means we can't override any properties with .flex and .grid

changed to flex, grid

bsmth · 2024-06-14T09:57:01Z

Nice, thank you! A couple of comments for your consideration!

bsmth · 2024-06-14T09:59:16Z

files/en-us/web/css/align-items/index.md

 }

 .flex {
  display: flex;
  flex-wrap: wrap;
+  background-color: #8c8c9f;
+  border-color: magenta;
 }

 .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);


If you think it makes sense to apply the other width changes, I guess we need it here, also

Suggested change

grid-template-columns: repeat(auto-fill, 50px);

grid-template-columns: repeat(auto-fill, 100px);

estelle

thanks @bsmth for the review.

estelle · 2024-06-14T18:43:41Z

files/en-us/web/css/align-items/index.md

+
+- `flex-start`
+
+  - : Used in flex layout only, aligns the flex items flush against the flex container's main-start or cross-start side.


i linked to the flex model in the sentence above

estelle · 2024-06-14T18:44:00Z

files/en-us/web/css/align-items/index.md

 ```css
-#container {
+:where(#container) {


changed to flex, grid

estelle · 2024-06-14T18:44:06Z

files/en-us/web/css/align-items/index.md

 ```css
-#container {
+:where(#container) {
  height: 200px;
  width: 240px;


bsmth · 2024-06-17T08:50:09Z

files/en-us/web/css/align-items/index.md

-The [CSS](/en-US/docs/Web/CSS) **`align-items`** property sets the {{cssxref("align-self")}} value on all direct children as a group. In Flexbox, it controls the alignment of items on the {{glossary("Cross Axis")}}. In Grid Layout, it controls the alignment of items on the Block Axis within their {{glossary("Grid Areas", "grid area")}}.
-
-The interactive example below demonstrates some of the values for `align-items` using grid layout.
+The [CSS](/en-US/docs/Web/CSS) **`align-items`** property sets the {{cssxref("align-self")}} value on all direct children as a group. In flexbox, it controls the alignment of items on the {{glossary("cross axis")}}. In Grid Layout, it controls the alignment of items on the block axis within their {{glossary("grid area")}}.


Suggested change

The [CSS](/en-US/docs/Web/CSS) **`align-items`** property sets the {{cssxref("align-self")}} value on all direct children as a group. In flexbox, it controls the alignment of items on the {{glossary("cross axis")}}. In Grid Layout, it controls the alignment of items on the block axis within their {{glossary("grid area")}}.

The [CSS](/en-US/docs/Web/CSS) **`align-items`** property sets the {{cssxref("align-self")}} value on all direct children as a group. In flexbox, it controls the alignment of items on the {{glossary("cross axis")}}. In Grid Layout, it controls the alignment of items on the block axis within their {{glossary("Grid Areas", "grid area")}}.

glossary link here is broken, it looks like it should be "Grid Areas"

bsmth

Thank you! Nice improvements 👍🏻

There's one Glossary link to fix, but leaving a +1. Well done ✔️

CSS property update: align-items

30e401b

estelle requested a review from a team as a code owner June 14, 2024 03:58

estelle requested review from bsmth and removed request for a team June 14, 2024 03:58

github-actions bot added Content:CSS Cascading Style Sheets docs size/m [PR only] 51-500 LoC changed labels Jun 14, 2024

estelle mentioned this pull request Jun 14, 2024

Flexbox openwebdocs/project#202

Closed

29 tasks

bsmth reviewed Jun 14, 2024

View reviewed changes

files/en-us/web/css/align-items/index.md Outdated Show resolved Hide resolved

bsmth reviewed Jun 14, 2024

View reviewed changes

files/en-us/web/css/align-items/index.md Outdated Show resolved Hide resolved

bsmth reviewed Jun 14, 2024

View reviewed changes

estelle added 3 commits June 14, 2024 11:42

Edits based of @bsmth's feedback

86054b8

grid size

b5d643b

flex values outside of flex

ac5b443

estelle commented Jun 14, 2024

View reviewed changes

estelle requested a review from bsmth June 14, 2024 18:53

bsmth reviewed Jun 17, 2024

View reviewed changes

bsmth approved these changes Jun 17, 2024

View reviewed changes

Update index.md

3dbb47d

estelle merged commit 24545e8 into main Jun 17, 2024
9 checks passed

estelle deleted the 202-align-items branch June 17, 2024 13:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS property update: align-items #34142

CSS property update: align-items #34142

estelle commented Jun 14, 2024

github-actions bot commented Jun 14, 2024 •

edited

Loading

bsmth Jun 14, 2024

estelle Jun 14, 2024

bsmth Jun 14, 2024

estelle Jun 14, 2024

bsmth Jun 14, 2024

bsmth Jun 14, 2024

bsmth Jun 14, 2024

estelle Jun 14, 2024

estelle Jun 14, 2024

bsmth commented Jun 14, 2024

bsmth Jun 14, 2024

estelle left a comment

estelle Jun 14, 2024

estelle Jun 14, 2024

estelle Jun 14, 2024

bsmth Jun 17, 2024

bsmth left a comment


		- `flex-start`

		- : Used in flex layout only, aligns the flex items flush against the flex container's main-start or cross-start side.

	<div id="item4">4<br />4</div>
	<div id="item4">4<br />(line break)</div>

	grid-template-columns: repeat(auto-fill, 50px);
	grid-template-columns: repeat(auto-fill, 100px);

	The [CSS](/en-US/docs/Web/CSS) `align-items` property sets the {{cssxref("align-self")}} value on all direct children as a group. In flexbox, it controls the alignment of items on the {{glossary("cross axis")}}. In Grid Layout, it controls the alignment of items on the block axis within their {{glossary("grid area")}}.
	The [CSS](/en-US/docs/Web/CSS) `align-items` property sets the {{cssxref("align-self")}} value on all direct children as a group. In flexbox, it controls the alignment of items on the {{glossary("cross axis")}}. In Grid Layout, it controls the alignment of items on the block axis within their {{glossary("Grid Areas", "grid area")}}.

CSS property update: align-items #34142

CSS property update: align-items #34142

Conversation

estelle commented Jun 14, 2024

github-actions bot commented Jun 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bsmth commented Jun 14, 2024

Choose a reason for hiding this comment

estelle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bsmth left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 14, 2024 •

edited

Loading