Skip to content

Instantly share code, notes, and snippets.

@ghostcode
Last active March 28, 2019 06:49
Show Gist options
  • Select an option

  • Save ghostcode/d3926585e1df334498a16f4fc921ce42 to your computer and use it in GitHub Desktop.

Select an option

Save ghostcode/d3926585e1df334498a16f4fc921ce42 to your computer and use it in GitHub Desktop.
flex布局左侧固定右边自适应

HTML:

<div class="box">
  <div class="sidebar">
    侧边栏
  </div>
  <div class="main">
    主要内容
  </div>
</div>

CSS:

.box{
  display:flex;
  height:400px;
}

.sidebar{
  flex-basis:200px;
  /* min-width:200px; 确保当页面很小的时候,左侧变小*/
  flex-grow:0;
  background-color: #ddd;
}
.main{
  flex-grow:1;
  background-color: #999;
}

Demo:

https://jsfiddle.net/ghostcode/t2mz69nh/6/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment