flexbox layout tutorial

some-flexbox-layout.js

    <div
      style={{
        display: 'flex',
        backgroundColor: 'red',
        flexDirection: 'row',
        justifyContent: 'space-between',
      }}
    >
      <div style={{ backgroundColor: 'blue', width: '100%' }}>
        <div style={{ display: 'flex', flexDirection: 'column', backgroundColor: 'red', width: '100%' }}>
          <div
            style={{
              display: 'flex',
              flexDirection: 'row',
              backgroundColor: 'gray',
              justifyContent: 'space-between',
            }}
          >
            <div style={{ backgroundColor: 'green', width: '40%' }}>sol</div>
            <div style={{ backgroundColor: 'white', width: '60%' }}>sağ</div>
          </div>
          <div>alt</div>
        </div>
      </div>
      <div style={{ backgroundColor: 'pink', width: '100%' }}>sağ taraf</div>
    </div>