Skip to content

Commit

Permalink
edits per review
Browse files Browse the repository at this point in the history
  • Loading branch information
estelle committed Jan 15, 2025
1 parent 68f4e8e commit 6594296
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ page-type: guide

{{CSSRef}}

The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods. In this guide, we explore how box alignment works in the context of flexbox. As this guide aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.
The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods. In this guide, we explore how box alignment works in the context of [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox). As this guide aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.

## Basic example

In this [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) example, three flex items are aligned on the main axis using {{cssxref("justify-content")}} and on the cross axis using {{cssxref("align-items")}}. The first item overrides the `align-items` values set on the group by setting {{cssxref("align-self")}} to `center`.
In this flexbox example, three flex items are aligned on the main axis using {{cssxref("justify-content")}} and on the cross axis using {{cssxref("align-items")}}. The first item overrides the `align-items` values set on the group by setting {{cssxref("align-self")}} to `center`.

```html live-sample___flex-align-items
<div class="box">
Expand Down
6 changes: 2 additions & 4 deletions files/en-us/web/css/css_box_alignment/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,7 @@ The alignment of text and inline-level content is defined in [CSS text module](/

## Guides

As the CSS box alignment properties are implemented differently depending on the specification they interact with, refer to the following pages for each layout type for details of how to use the alignment properties with it:

- [Box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
- [Box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)

- : Overview of the general concepts found in the CSS box alignment module.

Expand Down Expand Up @@ -95,5 +93,5 @@ As the CSS box alignment properties are implemented differently depending on the
- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
- [CSS display](/en-US/docs/Web/CSS/CSS_display) module
- [CSS flex layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module

0 comments on commit 6594296

Please sign in to comment.