align-self property in flexbox is not working?

StackOverflow https://stackoverflow.com//questions/20053156

  •  27-12-2019
  •  | 
  •  

题

I am trying to understand flex box: I want to make the “first” block stretched to match the full width of the browser, and the ”second” block of fixed size and aligned to left.

So I used align-items: flex-end in the parent(<html>) and tried to stretch the first block using align-self: stretch in the ”first” block.

This is not working. Both of them are aligned to the left.

<html>
  <head>
    <style>
      html {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
      }

      #first {
        align-self:stretch;
        background-color: red;
        border: 3px solid black;
      }

      #second {
        background-color:green;
        width: 300px;
        height: 400px;
        border: 3px solid yellow;
      }
    </style>
  </head>
  <body>
    <div id="first">This is first</div>
    <div id="second">This is second</div>
  </body>
</html>
有帮助吗？

解决方案

So the problem is that you've got the <html> node as a flex container, and the <body> node (its child) is the one and only flex item.

Currently, align-self:stretch on #first is ignored, because that property only applies to flex items, and #first is not a flex item (the way you have things set up right now).

To get what you want, you need to make the <body> node a flex container, not the <html> node. So, just change your first style rule to apply to body{ instead of html{

(Also, if you want #second to be aligned to the left, you need flex-start, not flex-end. The left edge is the flex-start horizontal edge, generally.)

其他提示

Add flex:1 to #first

Remove justify-content: flex-start; and align-items: flex-end; from html

See example: http://codepen.io/anon/pen/vifIr

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top