---
id: 6153908a366afb4d57185c8d
title: Hatua ya 12
challengeType: 0
dashedName: step-12
---

# --description--

Flexbox ina main na cross axis. Main axis inafafanuliwa na kipengele cha `flex-direction`, ambacho kina thamani nne zinazowezekana:

- `row` (default): horizontal axis yenye flex items kutoka kushoto kwenda kulia
- `row-reverse`: horizontal axis yenye flex items kutoka kulia kwenda kushoto
- `column`: vertical axis yenye flex items kutoka juu hadi chini
- `column-reverse`: vertical axis yenye flex items kutoka chini hadi juu

**Kumbuka**: Axes na direction itakuwa tofauti kulingana na mwelekeo wa maandishi. Thamani zilizoonyeshwa ni za mwelekeo wa maandishi kutoka kushoto kwenda kulia.

Jaribu thamani tofauti ili kuona jinsi zinavyoathiri mpangilio.

Ukimaliza, weka `flex-direction` ya `row` kwenye kipengele cha `.gallery`.

# --hints--

Kichaguzi chako cha `.gallery` kinafaa kuwa na sifa ya `flex-direction` yenye `row` kama thamani yake.

```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection === 'row');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
    </div>
  </body>
</html>
```

```css
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #f5f6f7;
}

.header {
  text-align: center;
  text-transform: uppercase;
  padding: 32px;
  background-color: #0a0a23;
  color: #fff;
  border-bottom: 4px solid #fdb347;
}

--fcc-editable-region--
.gallery {
  display: flex;
}
--fcc-editable-region--

.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
}
```
